libs/upp-wdgt/src/components/upp-input/upp-input.ts
A component for displaying validation errors for form controls.
Automatically integrates with Angular reactive forms using formControlName.
OnChanges
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | upp-er-input |
| styleUrls | ./er/upp-input.scss |
| templateUrl | ./er/upp-input.html |
Properties |
Methods |
Inputs |
constructor()
|
|
Constructor for dependency injection. |
| centered |
Type : boolean
|
Default value : false
|
|
Whether the error messages should be centered. |
| errornfo |
Type : ErrorInfo | null
|
Default value : null
|
|
A mapping of error keys to their respective error messages. |
| form |
Type : FormGroup | null
|
Default value : null
|
|
The formGroup provided to the related upp-input. |
| name |
Type : string | null
|
Default value : null
|
|
The name of the form control to track errors for. |
| value |
Type : string | null
|
Default value : null
|
|
Forces OnChanges to be called on value change. |
| ngOnChanges |
ngOnChanges()
|
|
Lifecycle hook. Updates the list of errors when inputs change.
Returns :
void
|
| Public control |
Type : AbstractControl | null
|
Default value : null
|
|
The form control associated with this component. |
| Public errors |
Type : string[]
|
Default value : []
|
|
The list of active error keys. |
<span *ngIf="control && errors && errors.length > 0" class="error-container" [ngClass]="{'show': (control.invalid && (control.dirty || control.touched))}">
<ion-label *ngFor="let error of errors" class="input-error" [ngClass]="{'center': centered, 'hide': (!control.errors || !control.errors[error])}">
{{errornfo?.[error] || null }}
</ion-label>
</span>
./er/upp-input.scss
:host {
.error-container {
opacity: 0;
&.show {
opacity: 1;
}
}
ion-label {
&.input-error {
color: var(--ion-color-danger);
position: absolute;
bottom: 2px;
right: 3px;
font-size: 12px;
transition: opacity 0.5s, font-size 0.5s;
&.hide {
opacity: 0;
pointer-events: none;
position: absolute;
top: 22px;
left: 8px;
font-size: 16px;
color: var(--ion-color-medium);
}
}
&.center {
width: 100% !important;
text-align: center !important;
right: unset !important;
}
}
}