Angular Material表单验证问题：mat-error提示未显示

安全阿岳

2026-5-21

解决Angular Material中mat-error不显示的问题

嘿，我看到你在用Angular Material做表单验证时碰到了mat-error始终不显示的问题，结合你给出的代码片段，我整理了几个最可能踩坑的点和对应的解决办法，你可以挨个排查试试：

先确认FormControl的验证状态真的触发了
首先得保证你的inputDepartmentControl已经添加了对应的验证规则，比如必填、格式验证这些。举个例子，组件类里应该有类似这样的代码：
```
inputDepartmentControl = new FormControl('', [Validators.required]);
```
另外你可以在模板里临时加个{{inputDepartmentControl.invalid}}，或者在组件里用console.log打印一下这个值，看看在应该报错的场景下（比如输入框为空），这个状态是不是真的变成了true。如果状态一直是false，那mat-error肯定不会显示。
检查ErrorStateMatcher的配置是否正确
你在模板里用了[errorStateMatcher]="matcher"，这个匹配器是用来决定什么时候该显示错误提示的。默认的匹配器只会在控件invalid且被触摸过（比如用户点击输入框后离开）或者表单被提交的时候才会显示错误。
如果你自定义了matcher，一定要确保它的逻辑是对的。比如下面这个自定义匹配器，会在控件invalid且被触摸、被修改过或者表单提交时显示错误：
```
export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.touched || control.dirty || isSubmitted));
  }
}
```
还要记得在组件里实例化这个matcher：matcher = new MyErrorStateMatcher();，要是没实例化，这个配置等于没生效。
同时用ngModel和FormControl的注意事项
当你同时使用[formControl]和[(ngModel)]时，要确保：
1. 你的Angular版本支持这种用法（Angular 8+是支持的，但需要同时导入ReactiveFormsModule和FormsModule）；
2. 不要重复设置控件的值，避免状态冲突；
3. name属性要和ngModel绑定的变量名对应，你的代码里name="departmentValue"和[(ngModel)]="departmentValue"是对应的，这部分没问题，但要确认没有其他冲突。
确认mat-form-field的结构没问题
mat-error必须是mat-form-field的直接子元素，不能被div或者其他标签包裹。你的代码里mat-error是直接放在mat-form-field里的，这部分看起来没问题，但要检查代码是否完整——比如你给出的片段里mat-error的*ngIf后面内容被截断了，要确保有完整的条件判断和闭合标签</mat-error>，比如：
```
<mat-error *ngIf="inputDepartmentControl.invalid && (inputDepartmentControl.touched || inputDepartmentControl.dirty)">
  请输入有效的部门信息
</mat-error>
```
是否触发了控件的touched/dirty状态
默认情况下，mat-error不会在用户刚打开页面就显示，需要用户触摸过输入框（touched）或者修改过内容（dirty），或者表单被提交。如果你希望用户输入错误时立即显示提示，可以修改ErrorStateMatcher的逻辑，或者在keyup事件里手动标记控件状态：
```
onDepartmentChange() {
  this.inputDepartmentControl.markAsTouched();
  this.inputDepartmentControl.markAsDirty();
  // 你的其他逻辑
}
```

最后给你一个完整的可参考示例：

组件类代码

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

// 自定义错误状态匹配器
export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.touched || control.dirty || isSubmitted));
  }
}

@Component({
  selector: 'app-department-input',
  templateUrl: './department-input.component.html',
})
export class DepartmentInputComponent {
  // 带必填验证的FormControl
  inputDepartmentControl = new FormControl('', [Validators.required]);
  departmentValue: string = '';
  // 实例化匹配器
  matcher = new MyErrorStateMatcher();

  onDepartmentChange() {
    this.inputDepartmentControl.markAsTouched();
    // 你的业务逻辑
  }

  keyDownFunction(event: KeyboardEvent) {
    // 你的按键处理逻辑
  }
}

模板代码

<mat-form-field>
  <input 
    matInput 
    placeholder="{{'DEPARTMENT' | translate}}" 
    [formControl]="inputDepartmentControl" 
    [(ngModel)]="departmentValue" 
    name="departmentValue" 
    [errorStateMatcher]="matcher"
    (keyup)="onDepartmentChange()" 
    (keydown)="keyDownFunction($event)"
  >
  <!-- 针对具体错误类型显示提示 -->
  <mat-error *ngIf="inputDepartmentControl.hasError('required')">
    部门是必填项，请输入
  </mat-error>
</mat-form-field>

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

Angular Material表单验证问题：mat-error提示未显示

组件类代码 #

模板代码 #

组件类代码

模板代码