web-dev-qa-db-ja.com

マットエラーがangular material 6 with custom global validatorsのmat-formフィールド内に表示されない理由

私はangular material 6を使用しています。mat-form-fieldの内側にvaidationがあります。mat-form-fieldの後に、適切に表示されているmat-error 。

動作しないコード：

 <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>

正常に動作しています：

 <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>

そのコントロール内で動作していない理由を説明する人もいます。

ライブデモ： stackblitz

angularangular-material2angular6angular-material-6
8
Mohamed Sahir

はい、mat-errorはデフォルトでは表示されません。入力がtouchedの場合にのみ表示されます。

ただし、幸いなことに、mat-input要素にバインドされたerrorStateMatcher入力プロパティを使用して、この動作をオーバーライドできます。

プルリクエスト この機能が追加された場所。

使用法 ：

<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>

したがって、この方法でコードにErrorStateMatcherを実装する必要があります。

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return (control && control.invalid);
  }
}

そして、コンポーネントにmatcherクラスの新しいオブジェクトErrorStateMatcherを追加します。これは[errorStateMatcher]="matcher"の値として機能します

matcher = new MyErrorStateMatcher();

私はあなたのフォークに同じコードを追加しました stackblitz

提案：

ngIfを指定するmat-errorにformControlName条件を指定する必要はありません。 mat-form-fieldに基づいて自動的に考慮されます。

9
Amit Chigadani

ErrorStateMatcherクラスをオーバーライドすることなく、単純にapp.module.tsにインポートできる非常に簡単なソリューションを見つけました。

import { ErrorStateMatcher, ShowOnDirtyErrorStateMatcher } from '@angular/material'; 
  @NgModule({  providers: [AlertService, { provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }],})
2
sherif shalaby