Angular Material日期选择器严格验证：禁用自动格式转换

要实现仅允许dd/mm/yyyy或dd-mm-yyyy格式的严格验证，同时阻止自动转换不符合格式的输入，可按以下步骤操作：

1. 创建自定义日期验证器 #

编写兼具格式校验和日期有效性校验的自定义验证器，确保输入完全符合要求：

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

export function strictDateValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const value = control.value;
    if (!value) return null; // 空值不触发校验

    // 匹配dd/mm/yyyy或dd-mm-yyyy格式的正则
    const dateRegex = /^(0[1-9]|[12][0-9]|3[01])[\/-](0[1-9]|1[012])[\/-](\d{4})$/;
    if (!dateRegex.test(value)) {
      return { invalidDateFormat: true };
    }

    // 验证日期实际有效性（比如2月30日这类无效日期）
    const parts = value.split(/[\/-]/);
    const day = parseInt(parts[0], 10);
    const month = parseInt(parts[1], 10) - 1; // 月份从0开始计数
    const year = parseInt(parts[2], 10);
    const date = new Date(year, month, day);

    if (date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day) {
      return { invalidDate: true };
    }

    return null;
  };
}

2. 配置表单控件与日期适配器 #

在组件中创建FormControl并添加验证器，同时自定义DateAdapter阻止自动解析不符合格式的输入：

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { strictDateValidator } from './strict-date.validator';
import { MAT_DATE_FORMATS, NativeDateAdapter } from '@angular/material/core';

// 自定义日期格式配置
export const MY_STRICT_DATE_FORMATS = {
  parse: {
    dateInput: { month: 'short', year: 'numeric', day: 'numeric' },
  },
  display: {
    dateInput: 'DD/MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

// 自定义适配器，覆盖parse方法实现严格解析
export class StrictNativeDateAdapter extends NativeDateAdapter {
  override parse(value: any): Date | null {
    // 输入不匹配格式时直接返回null，阻止自动转换
    const dateRegex = /^(0[1-9]|[12][0-9]|3[01])[\/-](0[1-9]|1[012])[\/-](\d{4})$/;
    if (typeof value === 'string' && !dateRegex.test(value)) {
      return null;
    }
    return super.parse(value);
  }
}

@Component({
  selector: 'app-date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.css'],
  providers: [
    { provide: MAT_DATE_FORMATS, useValue: MY_STRICT_DATE_FORMATS },
    { provide: NativeDateAdapter, useClass: StrictNativeDateAdapter },
  ],
})
export class DatePickerComponent {
  dateControl = new FormControl('', [
    Validators.required,
    strictDateValidator()
  ]);
}

3. 模板中添加错误提示 #

绑定FormControl并根据不同错误类型显示自定义提示：

<mat-form-field appearance="fill">
  <mat-label>选择日期</mat-label>
  <input matInput [matDatepicker]="picker" [formControl]="dateControl">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>

  <mat-error *ngIf="dateControl.hasError('invalidDateFormat')">
    请输入有效的日期格式，支持dd/mm/yyyy或dd-mm-yyyy
  </mat-error>
  <mat-error *ngIf="dateControl.hasError('invalidDate')">
    输入的日期不存在，请检查后重新输入
  </mat-error>
  <mat-error *ngIf="dateControl.hasError('required')">
    日期为必填项
  </mat-error>
</mat-form-field>

关键说明 #

• 自定义StrictNativeDateAdapter的parse方法，当输入不匹配指定格式时直接返回null，彻底阻止Angular Material自动转换不符合要求的输入。
• 自定义验证器同时校验格式和日期有效性，避免出现格式正确但实际不存在的日期。
• 模板中的错误提示根据具体错误类型展示，用户能清晰知晓问题所在。

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