Angular Material - 单击按钮时显示 mat-error

Question

我正在尝试使用 <mat-form-field> 和 <mat-error> 进行验证。当用户在不填充的情况下从输入中跳出标签时，这可以正常工作。但是，当我单击按钮时，如何强制显示此错误？我没有使用提交。此外，使用模板驱动的表单。

这是我的代码：

HTML：

 <mat-form-field>
    <input matInput placeholder="Due Date" name="dueDate" [(ngModel)]="dueDate" [formControl]="dueDateValidator" required>
    <mat-error *ngIf="dueDateValidator.invalid">Due Date is required for Tasks</mat-error>
</mat-form-field>

TS：

dueDateValidator: FormControl = new FormControl('', [Validators.required]);

原文由 ganeshk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

了解如何使用带有自定义 ErrorStateMatcher 的表单

如果您希望覆盖此行为（例如，在无效控件脏或父表单组无效时立即显示错误），您可以使用 matInput 的 errorStateMatcher 属性。该属性采用 ErrorStateMatcher 对象的实例。 ErrorStateMatcher 必须实现一个方法 isErrorState，该方法接受此 matInput 的 FormControl 以及父表单，并返回一个布尔值，指示是否应显示错误。 （true 表示应该显示，false 表示不应该显示。）

我会制作一个单独的文件，例如 default.error-matcher.ts

 /** Error when invalid control is dirty or touched*/
export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    return !!(control && control.invalid && (control.dirty || control.touched));
  }
}

然后在 TS 文件中添加：

 matcher = new MyErrorStateMatcher();

然后将输入更改为使用匹配器：

 <mat-form-field>
    <input matInput placeholder="Due Date" name="dueDate" [(ngModel)]="dueDate" [formControl]="dueDateValidator" [errorStateMatcher]="matcher" required>
    <mat-error *ngIf="dueDateValidator.invalid">Due Date is required for Tasks</mat-error>
</mat-form-field>

原文由 Kyle Pfromer 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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-重新服务应用程序。

原文由 Reza Taba 发布，翻译遵循 CC BY-SA 4.0 许可协议