Angular中mat-error的pattern校验错误提示不显示是什么原因？

问题产生原因 #

• 正则表达式语法错误
  你当前使用的正则/^[a-zA-Z_-]$/仅能匹配长度为1的合规字符，没有加量词匹配多个字符，只要输入内容长度≥2，正则校验都会直接失败，但如果此时同时触发了其他校验规则，会被优先级更高的错误覆盖。
• 错误判断逻辑未覆盖全部校验规则
  你给表单控件添加了required、pattern、minLength、maxLength4个校验规则，但errorMessage函数仅判断了前两个规则。当输入内容长度小于5时，会优先触发minLength错误，函数无对应返回值，看起来就像pattern校验没有生效。
• 可选排查点：确认输入框已正确绑定表单控件
  需要确保mat-form-field下的input标签已正确绑定[formControl]="formControl"，否则表单控件的状态无法同步到视图，mat-error也不会正常触发。

修复方案 #

1. 修正正则表达式 #

给正则添加+量词，匹配1个及以上的合规字符：

formControl = new FormControl('', [
    Validators.required, 
    Validators.pattern(/^[a-zA-Z_-]+$/), // 新增+量词匹配多字符
    Validators.minLength(5), 
    Validators.maxLength(32)
]);

2. 补全错误判断逻辑 #

errorMessage(): string | null {
    if (this.formControl.hasError('required')) {
      return '您必须输入一个值';
    } 
    if (this.formControl.hasError('pattern')) {
      return '用户名只能包含字母、下划线和横线';
    }
    if (this.formControl.hasError('minlength')) {
      return '用户名长度不能少于5位';
    }
    if (this.formControl.hasError('maxlength')) {
      return '用户名长度不能超过32位';
    }
    return null;
}

更推荐的写法是直接在模板中按错误类型分别声明mat-error，不需要调用函数，逻辑更清晰：

<mat-error *ngIf="formControl.hasError('required')">您必须输入一个值</mat-error>
<mat-error *ngIf="formControl.hasError('pattern')">用户名只能包含字母、下划线和横线</mat-error>
<mat-error *ngIf="formControl.hasError('minlength')">用户名长度不能少于5位</mat-error>
<mat-error *ngIf="formControl.hasError('maxlength')">用户名长度不能超过32位</mat-error>

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