Angular Material中FormControl的hasErrors始终为空问题求助

我明白你现在遇到的麻烦——明明给FormControl设置了错误状态，但是hasError()却一直返回空，连模板里的错误提示都出不来。咱们一步步来搞定这个问题：

1. 先确认错误设置的姿势对不对 #

Angular的FormControl有专门的错误设置方法，千万别直接修改errors属性！正确的做法是用setErrors()：

// 举个例子，在验证逻辑里这样写
this.emailFormControl.setErrors({ incorrect: true });

要是你直接写this.emailFormControl.errors = { incorrect: true }，Angular的表单控件根本不会触发状态更新，hasError()自然检测不到这个错误。

2. 让控件“意识到”自己有错误 #

有时候就算调用了setErrors()，如果控件没被标记为脏（dirty）或者被触碰过（touched），Angular Material的错误状态不会生效，hasError()的检测也会受影响。你可以手动更新控件状态：

// 标记为已触碰+已修改
this.emailFormControl.markAsTouched();
this.emailFormControl.markAsDirty();

或者在模板里加个blur事件，用户离开输入框时自动标记：

<input matInput placeholder="Email" [formControl]="emailFormControl" (blur)="markEmailAsTouched()">

组件里对应方法：

markEmailAsTouched() {
  this.emailFormControl.markAsTouched();
}

3. 自定义错误状态匹配规则（可选） #

Angular Material默认的错误匹配逻辑是：**控件无效 + （控件被触碰/脏了 或者 表单已提交）**才会显示错误。如果你想放宽条件（比如只要有错误就显示），可以自定义一个ErrorStateMatcher：

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

export class AlwaysShowErrorMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    // 只要控件存在且无效，就返回错误状态
    return !!(control && control.invalid);
  }
}

然后在组件里实例化，绑定到输入框：

errorMatcher = new AlwaysShowErrorMatcher();

模板里加上：

<input matInput placeholder="Email" [formControl]="emailFormControl" [errorStateMatcher]="errorMatcher">

4. 别忘加mat-error标签 #

最后，模板里一定要放mat-error元素，不然就算错误状态生效了，你也看不到提示：

<mat-form-field class="example-full-width">
  <input matInput placeholder="Email" [formControl]="emailFormControl">
  <!-- 这里显示错误提示 -->
  <mat-error *ngIf="emailFormControl.hasError('incorrect')">
    邮箱格式不正确，请重新输入
  </mat-error>
</mat-form-field>

回头看你的示例，大概率是没正确调用setErrors()，或者设置后没更新控件的脏/触碰状态，按照上面的步骤调整应该就能解决啦。

内容的提问来源于stack exchange，提问作者user2696126