为什么自定义全局验证器不能在角材料6中的垫形字段中显示垫形错误

Question

我使用的是角材料6，我有一个值，当移动到正确显示的垫子误差后，垫子误差未显示。

不工作代码：

 <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

Answer 1

在全球范围内，在键入或触摸时显示mat-错误：与提供的解决方案不同，此方法将处理所有mat-错误，而不需要将匹配器应用于每个输入字段。

1-创建-error-state.matcher.ts文件：

import {FormControl, FormGroupDirective, NgForm } from '@angular/forms';
import {ErrorStateMatcher} from '@angular/material/core';

export class TouchedErrorStateMatcher implements ErrorStateMatcher {
    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
        return !!(control && control.invalid && (control.dirty || control.touched));
    }
}

2-在app.module进口：

import { ErrorStateMatcher } from '@angular/material/core';
import { TouchedErrorStateMatcher } from './your-folder-path/touched-error-state.matcher';

3-现在将其提供给提供商：

@NgModule({
  providers: [
    AuthService,
    UserService,
    { provide: ErrorStateMatcher, useClass: TouchedErrorStateMatcher }
  ],
})

4-重新提供应用程序。

Answer 2

我发现了一个非常简单的解决方案，不需要重写ErrorStateMatcher类，只需在app.module.ts中导入即可

1-导入库：

import { ErrorStateMatcher, ShowOnDirtyErrorStateMatcher } from '@angular/material/core'; 

2-添加到提供程序，如：

@NgModule({
  providers: [
    AuthService,
    UserService,
    { provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }
  ],
})

重新提供应用程序。

Reza Taba于2021年1月2日更新

但是，上面的简短解决方案存在一个问题：如果用户在触摸（模糊）后将字段留空，则不会显示所需的错误。

请参阅我的解决方案以获得修复。

Answer 3

是的，mat-error默认不显示。它只显示当输入被触摸。

但是，幸运的是，您可以使用绑定到mat input元素的errorStateMatcherinput属性重写此行为。

添加了此功能的请求。

使用方法：

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

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

建议：

您无需为指定formControlName的mat错误提供ngIf条件。它将根据其所在的mat form字段自动考虑。