Angular中matDatepickerMin动态错误消息不显示问题求助

Angular的matDatepickerMin内置验证器触发时，不会自动将自定义消息绑定到控件的errors对象中，所以直接读取errors.message拿不到内容。要实现三种不同的提示，可通过以下两种方式解决：

方法一：自定义验证器替代内置验证 #

自己编写验证函数，在验证失败时返回包含自定义消息的错误对象，就能在模板中直接读取：

TS代码示例 #

import { AbstractControl, ValidatorFn } from '@angular/forms';

// 自定义日期最小值验证器，支持传入不同场景的提示消息
export function dateMinValidator(minDate: Date, messages: {[key: string]: string}): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    if (!control.value) return null; // 空值不触发验证
    const selectedDate = new Date(control.value);
    const min = new Date(minDate);
    
    if (selectedDate < min) {
      // 根据场景判断返回对应消息，示例按日期范围区分三种场景
      let errorMessage: string;
      if (min < new Date('2023-01-01')) {
        errorMessage = messages.early;
      } else if (min < new Date('2024-01-01')) {
        errorMessage = messages.mid;
      } else {
        errorMessage = messages.late;
      }
      return { matDatepickerMin: true, message: errorMessage };
    }
    return null;
  };
}

// 表单初始化时使用自定义验证器
this.form = this.fb.group({
  date: [null, [
    dateMinValidator(new Date('2023-06-01'), {
      early: '日期不能早于2022年',
      mid: '日期不能早于2023年中',
      late: '日期不能早于当前季度'
    })
  ]]
});

模板代码（保持原写法即可） #

<mat-error *ngIf="form.controls.date.hasError('matDatepickerMin')">
    {{ form.controls.date.errors.message }}
</mat-error>

方法二：手动触发验证后设置错误消息 #

如果不想替换内置验证器，可在表单值变化或提交时，手动检查日期是否违反matDatepickerMin，再手动设置错误消息：

TS代码示例 #

// 监听日期控件值变化
this.form.get('date')?.valueChanges.subscribe(date => {
  const control = this.form.get('date');
  if (!control) return;
  
  // 清除之前的自定义消息
  const currentErrors = { ...control.errors };
  delete currentErrors.message;
  control.setErrors(currentErrors);

  // 检查是否触发内置matDatepickerMin错误
  if (control.hasError('matDatepickerMin')) {
    const minDate = control.getError('matDatepickerMin').min; // 获取内置验证的最小日期
    let message: string;
    // 根据minDate区分三种场景的提示
    if (new Date(minDate) < new Date('2023-01-01')) {
      message = '日期不能早于2022年';
    } else if (new Date(minDate) < new Date('2024-01-01')) {
      message = '日期不能早于2023年中';
    } else {
      message = '日期不能早于当前季度';
    }
    // 将自定义消息写入errors对象
    control.setErrors({ ...control.errors, message });
  }
});

模板代码保持不变 #

<mat-error *ngIf="form.controls.date.hasError('matDatepickerMin')">
    {{ form.controls.date.errors.message }}
</mat-error>

第一种方法更推荐，验证逻辑更集中，符合Angular表单验证的设计思路。

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