Angular：自定义校验器生效时DatePicker输入框的mat-error未展示错误

问题根因 #

Angular Material 的mat-error默认错误状态匹配逻辑仅会在以下两种场景下触发显示：

• 绑定的表单控件自身状态为invalid且已被touched（用户点击过）
• 控件所属的表单已被提交

你当前用的是跨字段自定义校验器，是挂载在**表单组（FormGroup）**上的，错误标记也挂在表单组而非end_date控件本身，因此end_date控件无法识别到自身处于错误状态，自然不会触发错误样式变更和提示展示。

解决方法 #

方案一：自定义错误状态匹配器（推荐） #

通过自定义ErrorStateMatcher让end_date控件可以识别父表单组的错误状态：

1. 在组件TS文件中定义匹配器

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

export class 你的组件类名 {
  // 跨字段校验错误匹配器
  crossFieldErrorMatcher: ErrorStateMatcher = {
    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
      return !!(
        control && 
        (control.invalid || form?.hasError('validator')) && 
        (control.touched || form?.submitted)
      );
    }
  };
}

2. 在HTML中给end_date输入框绑定匹配器

<input matInput [matDatepicker]="endPicker" formControlName="end_date" [errorStateMatcher]="crossFieldErrorMatcher">

原有mat-error的代码不需要改动即可正常显示。

方案二：直接给结束日期控件挂载错误 #

如果你不想自定义匹配器，也可以在校验器逻辑中直接把错误标记挂载到end_date控件上：

// 你的自定义日期范围校验器
dateRangeValidator(group: FormGroup) {
  const startDate = group.get('start_date').value;
  const endDate = group.get('end_date').value;
  const endControl = group.get('end_date');
  
  if (startDate && endDate && endDate < startDate) {
    endControl.setErrors({ dateRangeInvalid: true });
    return { validator: true };
  }
  
  // 校验通过时清空控件错误
  endControl.setErrors(null);
  return null;
}

该方案不需要修改HTML代码，控件自身存在错误标记时就会自动触发mat-error展示。

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