如何使用正则表达式验证mat-datepicker手动输入的日期格式？

我懂你碰到的这个坑——mat-datepicker的自动转换特性确实会让字符串正则验证直接失效，因为它把用户输入的文本转成了Date对象，而Validators.pattern()只认字符串格式，自然就不起作用了。下面给你几个实用的解决办法：

核心原因先理清楚 #

当用户手动输入日期后，mat-datepicker会自动尝试把输入的字符串解析成Date实例，然后把这个Date对象赋值给FormControl的value属性。你的正则是针对MM/DD/YYYY格式的字符串写的，但现在FormControl里存的是Date对象，正则匹配根本无从谈起，这就是验证失效的关键。

解决方案1：自定义验证器，针对Date对象+原始输入值验证 #

我们可以写一个自定义验证器，既检查Date对象是否有效，又验证用户输入的原始字符串格式是否符合要求：

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

// 自定义日期验证器
export function validMMDDYYYYDate(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const selectedDate = control.value;
    
    // 处理必填项（也可以单独用Validators.required）
    if (!selectedDate) {
      return { required: true };
    }

    // 检查是否是有效的Date对象
    if (!(selectedDate instanceof Date) || isNaN(selectedDate.getTime())) {
      return { invalidDate: '请输入有效的日期' };
    }

    // 验证输入框的原始字符串格式是否符合MM/DD/YYYY
    const inputElement = document.querySelector('input[formControlName="dob"]') as HTMLInputElement;
    if (inputElement) {
      const inputText = inputElement.value.trim();
      const dobRegex = /^((0[1-9])|(1[0-2]))\/((0[1-9])|([1-2][0-9])|(3[0-1]))\/\d{4}$/;
      
      if (!dobRegex.test(inputText)) {
        return { invalidDateFormat: '请输入MM/DD/YYYY格式的日期' };
      }
    }

    return null;
  };
}

// 在FormControl中使用
public dob: FormControl = new FormControl(null, [
  Validators.required,
  validMMDDYYYYDate()
]);

解决方案2：配置mat-datepicker的全局解析格式，强制MM/DD/YYYY #

通过配置MAT_DATE_FORMATS，让mat-datepicker只接受MM/DD/YYYY格式的输入，不符合格式的内容会直接解析失败，FormControl会变成无效状态：

1. 先定义自定义日期格式：

import { MAT_DATE_FORMATS } from '@angular/material/core';

export const CUSTOM_DATE_FORMATS = {
  parse: {
    dateInput: 'MM/DD/YYYY', // 解析输入时严格遵循这个格式
  },
  display: {
    dateInput: 'MM/DD/YYYY', // 显示在输入框里的格式
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

2. 在组件所属的模块中提供这个配置：

import { NgModule } from '@angular/core';
import { MAT_DATE_FORMATS } from '@angular/material/core';
import { CUSTOM_DATE_FORMATS } from './path-to-your-date-formats';

@NgModule({
  providers: [
    { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }
  ]
})
export class YourComponentModule { }

这样配置后，用户输入不符合MM/DD/YYYY的内容时，mat-datepicker无法解析出有效的Date，FormControl会保持null，结合Validators.required就能触发错误提示。

解决方案3：监听输入框原始值，手动控制验证状态 #

如果你想完全靠正则验证输入字符串，可以直接监听输入框的input事件，获取原始输入文本，用你的正则校验后手动设置FormControl的错误状态：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-dob-picker',
  template: `
    <mat-form-field>
      <input matInput [matDatepicker]="picker" formControlName="dob" #dobInput>
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
      <mat-error *ngIf="dob.hasError('required')">日期为必填项</mat-error>
      <mat-error *ngIf="dob.hasError('invalidDateFormat')">请输入MM/DD/YYYY格式的日期</mat-error>
    </mat-form-field>
  `
})
export class DobPickerComponent {
  @ViewChild('dobInput') dobInput!: ElementRef<HTMLInputElement>;
  public dob: FormControl = new FormControl(null, Validators.required);
  private readonly dobRegex = /^((0[1-9])|(1[0-2]))\/((0[1-9])|([1-2][0-9])|(3[0-1]))\/\d{4}$/;

  ngAfterViewInit() {
    this.dobInput.nativeElement.addEventListener('input', () => {
      const inputValue = this.dobInput.nativeElement.value.trim();
      
      if (inputValue && !this.dobRegex.test(inputValue)) {
        // 添加格式错误
        this.dob.setErrors({ ...this.dob.errors, invalidDateFormat: true });
      } else {
        // 移除格式错误（如果存在）
        if (this.dob.errors?.invalidDateFormat) {
          delete this.dob.errors.invalidDateFormat;
          this.dob.setErrors(this.dob.errors || null);
        }
      }
    });
  }
}

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