web-dev-qa-db-fra.com

Pourquoi l’erreur mat ne s’affiche pas dans un champ mat dans un matériau angulaire 6 avec les validateurs globaux

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

angularangular-material2angular6angular-material-6
4
Mohamed Sahir

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.

5
Amit Chigadani

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 }],})
1
sherif shalaby