Angular Material表单服务端错误即时显示问题求助

我之前也碰到过完全一样的坑！Angular Material的mat-error默认只有在表单控件被**触摸过（touched）或者表单被提交过（submitted）**之后，才会触发显示错误提示。你现在只是给控件设置了错误状态，但控件本身还是untouched状态，所以错误提示不会自动弹出来。

这里有几个实用的解决办法，你可以根据自己的需求选择：

方法1：手动标记控件为已触摸 #

这是最直接适配你现有代码的方案——在设置完控件错误后，调用markAsTouched()强制把控件状态改成已触摸，mat-error就会立刻显示了：

this.errors$.subscribe(errors => {
  if (errors) {
    if (errors.username) {
      this.usernameError = errors.username;
      const usernameControl = this.regForm.controls['username'];
      usernameControl.setErrors({usernameServerError: this.usernameError}); 
      // 新增这一行，标记控件为已触摸状态
      usernameControl.markAsTouched();
    }
  }
});

如果需要同时让控件标记为“值已修改”（dirty状态），可以再加上usernameControl.markAsDirty();，不过通常markAsTouched()就足够触发错误显示了。

方法2：强制更新控件有效性状态 #

调用updateValueAndValidity()让Angular重新计算控件的状态和有效性，这也会触发错误提示的渲染：

this.errors$.subscribe(errors => {
  if (errors) {
    if (errors.username) {
      this.usernameError = errors.username;
      const usernameControl = this.regForm.controls['username'];
      usernameControl.setErrors({usernameServerError: this.usernameError}); 
      // 强制更新控件的状态与有效性
      usernameControl.updateValueAndValidity();
    }
  }
});

方法3：自定义ErrorStateMatcher（全局/局部生效） #

如果你希望所有或多个mat-error只要有错误就显示，不管控件有没有被触摸，可以自定义一个ErrorStateMatcher来改变默认规则：

首先创建一个匹配器类：

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

export class AlwaysShowErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    // 只要控件无效，就返回true，触发错误显示
    return !!(control && control.invalid);
  }
}

然后在组件中实例化并绑定到对应的mat-form-field上：

// 组件类内添加
errorMatcher = new AlwaysShowErrorStateMatcher();

模板中修改对应的输入框：

<mat-form-field>
  <input matInput formControlName="username" [errorStateMatcher]="errorMatcher">
  <mat-error *ngIf="regForm.controls['username'].hasError('usernameServerError')">
    {{usernameError}}
  </mat-error>
</mat-form-field>

这个方案适合需要全局统一错误显示规则的场景，一劳永逸。

推荐先试试方法1，改动最小，应该能立刻解决你的问题！

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