Как проверить правильность ввода 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. Любой другой ввод, который не является числом, преобразует его в ноль.

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

Есть ли способ, которым я могу проверить введенный вручную текст, используя шаблон?

Answer 1

Вы можете устранить ошибку, установив минимальное значение "Ввод" длиной 10 символов, а максимальное значение "Ввод" - 10 символов. Затем, когда вы вводите цифру, средство выбора даты будет проверять дату, а также, будет ли это 10 символов. долго.

Answer 2

Прикольное решение, которое я использовал, переключаясь на Момент.

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