Angular 如何使用模式验证mat datepicker输入？

我使用mat datepicker，用户可以手动输入日期。我希望能够这样做来验证日期，并确保它遵循MM/DD/YYYY模式：

const dobRegex: RegExp = /((?:0[1-9])|(?:1[0-2]))\/((?:0[0-9])|(?:[1-2][0-9])|(?:3[0-1]))\/(\d{4})/;
public dob: FormControl = new FormControl(null, Validators.compose( [ Validators.required, Validators.pattern(dobRegex)]));

但是，当我执行上述操作时，它不起作用，因为mat datepicker正在将任何带有数字的输入转换为日期对象。任何其他不是数字的输入都会将其转换为null

public date(c: FormControl) {
   console.log(c.value) // This value is already a Date object or null
}

---

是否有一种方法可以使用模式验证手动输入的文本？

您可以通过将输入的最小值设置为10个字符，将输入的最大值设置为10个字符来解决此错误。然后，当您输入数字时，日期选择器将验证日期以及日期是否为10个字符

另一种方法是通过提供 模块中的自定义组件

providers: [{ provide: DateAdapter, useClass: UserDateAdapter },]

然后在组件中

import { NativeDateAdapter, DateAdapter } from '@angular/material';

export class UserDateAdapter extends NativeDateAdapter {
parse(value: any): Date | null {
 //Your custom parse method 
 if ((typeof value === 'string') && (value.indexOf('/') > -1) && 
      value.length == 10) {
        const str = value.split('/');
        const year = Number(str[2]);
        const month = Number(str[0]) - 1;
        const date = Number(str[1]);
        return new Date(year, month, date);
  } else {
         return new Date(undefined);
  }
}

---

我使用的黑客解决方案切换到了“瞬间”

import { AbstractControl } from '@angular/forms';
import * as moment from 'moment';

import { RegEx } from 'app/consts/regex.const';

export class DateValidator {
  public static isValidFormat(control: AbstractControl) {
    if (moment.isMoment(control.value)) {
      const input = control.value.creationData().input;
      if (typeof input === 'string' && (RegEx.DATE).test(input)
          || typeof input === 'object' && input.hasOwnProperty('year') && 
          input.hasOwnProperty('month') && input.hasOwnProperty('date')) {
        return null;
      }
    }

    if (!control.value && control.errors && control.errors.matDatepickerParse) {
      const datePickerText = control.errors.matDatepickerParse.text;
      if (!datePickerText) {
        return null;
      }
    }

    return { pattern: true };
  }
}

---

这并不能完全解决问题，但无论如何我都会接受答案，因为似乎没有一个好方法可以使用正则表达式验证手动输入。我最终使用的解决方案是使用矩，并通过获取

creationData（）

来验证它。您最终使用的解决方案是使用矩，并通过获取creationData（）来验证它。您能否解释或分享代码，比如如何使用creationData（）解析代码？我们不需要使用即时消息。我已经更新了解决方案。实际上，我们正在重写本机数据适配器的解析方法。第一个方法（最小和最大长度均设置为10）对我不起作用-输入被解析为日期，并在验证之前被转换为10个字符。使用第二个方法，在执行新日期（未定义）时，它将日期作为无效日期返回。因此，您只需验证日期是否有效。