时间戳

首页 > 解决方案 > 为什么使用自定义全局验证器在角度材料 6 的 mat-form 字段中未显示 mat-error

angular - 为什么使用自定义全局验证器在角度材料 6 的 mat-form 字段中未显示 mat-error

问题描述

我正在使用角度材料 6，当在 mat-form-field 之后移动到正确显示的 mat-error 时，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

解决方案

是mat-error的，默认情况下不显示。它仅在输入为 时显示touched。

errorStateMatcher但是，幸运的是，您可以使用绑定到mat-input元素的输入属性覆盖此行为。

添加此功能的拉取请求。

用法 ：

<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();

我还在您的分叉堆栈闪电战中添加了相同的代码

建议：

您无需提供ngIf条件来mat-error指定您的formControlName. 它将根据mat-form-field它所在的位置自动考虑。

推荐阅读