Angular中如何为formControl的日期输入应用正则校验

你遇到的核心问题是：matDatetimepicker 绑定的表单控件值是 Date 类型对象，而非用户输入的原始字符串，所以你用正则表达式去匹配 Date 对象，自然得不到预期结果。

根据你的需求，提供三种可行的处理方式：

1. 直接基于 Date 对象验证有效性（推荐） #

如果只是要确认日期合法，不需要纠结字符串格式，直接判断值是否为有效 Date 即可：

this.inputFormGroup.get('eventDate').valueChanges.subscribe((selectedValue) => {
  // 检查是否为有效 Date 对象
  if (selectedValue instanceof Date && !isNaN(selectedValue.getTime())) {
    console.log('do my stuff');
  }
});

2. 监听输入框原始输入事件（获取字符串） #

如果需要处理用户手动输入的原始字符串，不要用 valueChanges，而是监听输入框的 input 事件：

模板修改： #

<input 
  matInput 
  formControlName="eventDate" 
  [max]="utilService.getToday()" 
  [matDatetimepicker]="datetimePicker" 
  required 
  autocomplete="false"
  (input)="onEventDateInput($event)"
>

组件逻辑： #

onEventDateInput(event: Event) {
  const inputValue = (event.target as HTMLInputElement).value;
  // 优化正则：确保分隔符统一（比如不能是 12/31-2024 这种混合格式）
  const dateRegex = /^[0-9]{1,2}([/|-|.])[0-9]{1,2}\1[0-9]{4}$/;
  if (dateRegex.test(inputValue)) {
    console.log('do my stuff');
  }
}

3. 自定义表单验证器（规范校验流程） #

把格式校验逻辑封装成表单验证器，既可以统一校验，也能结合 valueChanges 处理业务：

定义验证器： #

dateFormatValidator(control: AbstractControl): ValidationErrors | null {
  if (!control.value) return null;

  let inputStr: string;
  // 如果是 Date 对象，转成指定格式字符串再校验
  if (control.value instanceof Date) {
    inputStr = control.value.toLocaleDateString(); // 或自定义格式转换
  } else {
    inputStr = control.value as string;
  }

  const dateRegex = /^[0-9]{1,2}([/|-|.])[0-9]{1,2}\1[0-9]{4}$/;
  return dateRegex.test(inputStr) ? null : { invalidDateFormat: true };
}

绑定到表单控件： #

this.inputFormGroup = new FormGroup({
  eventDate: new FormControl(
    null,
    [Validators.required, this.dateFormatValidator.bind(this)]
  )
});

结合 valueChanges 使用： #

this.inputFormGroup.get('eventDate').valueChanges.subscribe(() => {
  const control = this.inputFormGroup.get('eventDate');
  // 验证通过时执行逻辑
  if (control.valid && !control.hasError('invalidDateFormat')) {
    console.log('do my stuff');
  }
});

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