为什么 mat-error 没有显示在 angular material 6 中的 mat-form 字段中，带有自定义全局验证器

Question

我正在使用 angular material 6，当在 mat-form-field 之后移动到正确显示的 mat-error 时，我在 mat-form-field 中有一个 vaidation mat-error is not displayed 。

无效代码：

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

有人解释了为什么 which 在该控件内不起作用。

现场演示： stackblitz

Answer 1

是的，mat-error 默认不显示。它仅在输入为 touched.

时显示

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

添加此功能的pull request。

用法：

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

然后在您的组件中为 ErrorStateMatcher class 添加一个新对象 matcher，它将作为 [errorStateMatcher]="matcher"

的值

matcher = new MyErrorStateMatcher();

我也在你的分支中添加了相同的代码stackblitz

建议:

您无需为 mat-error 提供 ngIf 条件来指定您的 formControlName。系统会根据它所在的 mat-form-field 自动考虑它。

Answer 2

我找到了一个非常简单的解决方案，无需覆盖 ErrorStateMatcher Class，您只需在 app.module.ts

中导入即可

1- 导入库：

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

2- 添加到提供商，如：

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

重新提供应用。

更新于 2021 年 1 月 2 日 Reza Taba

虽然上面的简短解决方案存在问题： 如果用户在触摸（模糊）后将该字段留空，需要错误未显示。

有关修复，请参阅。

Answer 3

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

1- 创建 touched-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- 重新提供应用程序。

为什么 mat-error 没有显示在 angular material 6 中的 mat-form 字段中，带有自定义全局验证器

Why mat-error not get displayed inside mat-form field in angular material 6 withcustom global validators

angular-material2

angular

angular6

angular-material-6