如何检查matInput是否显示错误

Question

当matInput出现错误(由formControl控制(时，我尝试显示错误消息和错误图标。但是，如果表单是在未触摸字段的情况下提交的，则不会显示错误。

在stackblitz 上查看代码游乐场

或者这是我的代码：

app.component.ts

ngOnInit() {
this.formGroup = new FormGroup({
email: new FormControl(null, [Validators.required, Validators.email]),
});
}
get emailHasError() {
return (
!this.formGroup.get('email').valid && this.formGroup.get('email').touched
);
}

app.component.html

<form [formGroup]="formGroup" class="form">
<mat-form-field class="form-element">
<input matInput placeholder="Email address" formControlName="email" />
<mat-error *ngIf="emailHasError">
{{ errorEmail }}
</mat-error>
</mat-form-field>
<div class="form-element">
<button mat-raised-button color="primary" type="submit" class="button">
Submit Form
</button>
</div>
</form>

但是，matInput字段变为红色，并且似乎收到了错误。

我读到一些解决方案，建议在表单提交上切换属性isSubmit。但是看起来很难看，并且如果表单被拆分为几个组件，则需要将此属性传递给子组件。

Angular Material如何检测表单是否已提交以显示错误？

编辑：

我现在找到的唯一解决方案是用@ViewChild检查classList，如下所示。但这似乎仍然是一种古怪的方式。。。关于stackblitz我处理如下：

@ViewChild('matInput') matInput: ElementRef;
get hasError() {
return this.matInput?.nativeElement?.classList?.contains('ng-invalid');
}

<input
matInput
#matInput
placeholder="Email address"
formControlName="email"
/>

Answer 1

无需返回emailHasError()和errorEmail()，并且检查组件内部的触摸，角度材料输入字段会自动检查，并且只有在字段被触摸时才会显示mat-error。

相反，直接检查html中的错误并相应地显示消息。

点击此处查看工作演示

在styles.css中添加了这个css，如果有多个错误，则只显示第一个错误-

/* shows only first error */
.mat-error:not(:first-of-type) {
display: none !important;
}

Answer 2

自定义ErrorStateMatcher可能是解决此问题的好方法。

1. 创建一个自定义ErrorStateMatcher，如下所示：

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

2. 将其添加到组件类中

matcher = new MyErrorStateMatcher();

3. 在模板中使用它

<mat-form-field class="form-element">
<input
matInput
placeholder="Email address"
formControlName="email"
[errorStateMatcher]="matcher"
/>
<mat-error *ngIf="formGroup.invalid">
<mat-icon mat-suffix color="warn">error</mat-icon>
{{ errorEmail }}
</mat-error>
</mat-form-field>

ErrorStateMatcher精确地控制哪一组条件应该在UI中显示错误响应。在当前示例中，只要isSubmitted为true，它就会显示，即使表单控件不是"；脏的"；或"；触摸"；。

这是一个stackblitz演示。