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对象。任何其他不是数字的输入都会将其转换为空。

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

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

Answer 1

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

另一种方法是通过提供来覆盖mat-date Pickers解析方法模块中的自定义组件。

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

然后在组件中

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

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

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输入？

2 个答案: