j'utilise un matériau angulaire 6, j'ai une vaidation à l'intérieur de mat-form-field mat-error n'est pas affiché, lorsque vous passez après mat-form-field à mat-error qui s'affiche correctement.
Code non fonctionnel:
<mat-form-field>
<input matInput type="time" formControlName="ToTime"/> <mat-error *ngIf="DaterForm.get('ToTime').hasError('InValidToTime')">FromTime Should be less than ToTime if choose a same date</mat-error>
</mat-form-field>
Fonctionne bien:
<input matInput type="time" formControlName="ToTime"/> </mat-form-field>
<mat-error *ngIf="DaterForm.get('ToTime').hasError('InValidToTime')">FromTime Should be less than ToTime if choose a same date</mat-error>
Quelqu'un explique pourquoi ce qui ne fonctionne pas dans ce contrôle.
Démo en direct: stackblitz
Oui, mat-error
ne s'affiche pas par défaut. Il ne montre que lorsque l'entrée est touched
.
Mais, heureusement, vous pouvez remplacer ce comportement en utilisant la propriété d'entrée errorStateMatcher
, liée à l'élément mat-input
.
La requête pull dans laquelle cette fonctionnalité a été ajoutée.
Utilisation:
<mat-form-field>
<input matInput [errorStateMatcher]="matcher" [matDatepicker]="picker" placeholder="Choose a Start date"
formControlName="FromDate"
[min]="minFromDate"
[max]="maxToDate" >
<mat-datepicker-toggle matSuffix [for]="picker" ></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-error >Please provide a valid Fromdate</mat-error>
</mat-form-field>
Donc, vous devez implémenter ErrorStateMatcher
dans votre code de cette façon.
export class MyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
const isSubmitted = form && form.submitted;
return (control && control.invalid);
}
}
Et dans votre composant, ajoutez un nouvel objet matcher
pour la classe ErrorStateMatcher
, qui servira de valeur pour [errorStateMatcher]="matcher"
matcher = new MyErrorStateMatcher();
J'ai également ajouté le même code dans votre forked stackblitz
Suggestion:
Vous n'avez pas besoin de fournir une condition ngIf
pour mat-error
spécifiant votre formControlName
. Il sera automatiquement considéré en fonction du mat-form-field
dans lequel il est présent.
J'ai trouvé une solution très simple sans remplacer la classe ErrorStateMatcher, vous pouvez simplement importer dans le fichier app.module.ts
import { ErrorStateMatcher, ShowOnDirtyErrorStateMatcher } from '@angular/material';
@NgModule({ providers: [AlertService, { provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }],})