Angular响应式表单自定义日期验证器：校验日期早于今日

嘿，这就给你搞定这个自定义日期校验器，完美适配你的Angular响应式表单需求！直接上可用的代码：

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

export function dateValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    // 控件值为空时返回null，如果你需要必填校验，单独搭配Validators.required即可
    if (!control.value) {
      return null;
    }

    // 处理输入日期：清零时间部分，避免时间干扰日期比较
    const inputDate = new Date(control.value);
    inputDate.setHours(0, 0, 0, 0);
    
    // 处理今日日期：同样清零时间，确保只比较年/月/日部分
    const today = new Date();
    today.setHours(0, 0, 0, 0);

    // 核心逻辑：如果输入日期不早于今日，返回错误对象；否则校验通过
    return inputDate >= today ? { 'dateTooLate': { value: control.value } } : null;
  };
}

关键细节说明 #

• 时间清零的必要性：如果直接用默认new Date()比较，会包含当前时间（比如下午3点），而用户选择的今日日期默认是0点，这样会误判为“早于今日”。清零时间后，我们只对比年/月/日，逻辑更准确。
• 错误提示的使用：你可以在模板里通过错误键dateTooLate给用户提示，比如在你的mat-form-field里添加：

<mat-error *ngIf="form.get('birthday')?.hasError('dateTooLate')">
  生日必须早于今日哦
</mat-error>

• 搭配必填校验：如果要求生日是必填项，记得在表单控件配置里同时加入Validators.required：

birthday: [, [Validators.required, dateValidator]],

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