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

Question

我正在使用 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 正在将任何带有数字的输入转换为 Date 对象。任何其他不是数字的输入都会将其转换为 null。

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

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

Answer 1

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

另一种方法是通过提供重写mat-date选择器解析方法模块中的自定义组件。

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);
  }
}

Answer 2

我切换到 Moment 时使用的 Hacky 解决方案。

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 };
  }
}

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

How to validate mat-datepicker input using pattern?

datepicker

angular-material2

angular

angular-forms

angular2-form-validation