Angular 7 Измените этот пользовательский валидатор, чтобы при редактировании пользователем значения месяца или дня валидация работала правильно - PullRequest
Новая
       45

Angular 7 Измените этот пользовательский валидатор, чтобы при редактировании пользователем значения месяца или дня валидация работала правильно

0 голосов
/ 03 октября 2019

У меня есть этот пользовательский валидатор для дат в формате ММ / ДД / ГГГГ. Он работает правильно, если пользователь вводит правильную дату.

Однако, если пользователь редактирует значения месяца или дня, элемент управления формы становится недействительным, несмотря на то, что сама дата остается действительной.

ДляНапример, если пользователь вводит 01.01.2000, дата действительна. Если пользователь вводит это значение и редактирует только день или месяц, элемент управления становится недействительным. например: 01/01/2000 (VALID) -> 01/02/2000 (INVALID).

Они должны удалить все значение в поле ввода и повторно ввести новое значение, вместо того, чтобы сделать егоредактировать в элементе управления формы.

Как я могу изменить свой настраиваемый валидатор и / или метод маскирования CSS, чтобы они могли вносить изменения в поле ввода и при этом иметь правильную валидацию?

Мой настраиваемый валидатор: 

 static pastMonthYearFormat(control: AbstractControl) {
  const isValid = (/^\d{2}\/\d{4}$/).test(control.value);
  if (isValid) {
    const splitValue = control.value.split('/');
    const month = splitValue[0];
    const year = splitValue[1];

    const currentYear = new Date().getFullYear();
    const currentMonth = new Date().getMonth() + 1;

    if (
      (Number(month) && Number(year) && Number(month) <= 12) &&
      ((currentMonth >= Number(month) &&
        currentYear >= Number(year)) ||
        currentYear > Number(year))) {
      return null;
    } else {
      return { pastMonthFormat: true };
    }
  }
  return { pastMonthFormat: true };
}

Мой метод маскировки: 

  maskInputDate(e) {
    const t = e.target.value.replace(/\D/g, '').match(/(\d{0,2})(\d{0,2})(\d{0,4})/);
    e.target.value = t[2] ? t[1] + '/' + t[2] + (t[3] ? '/' + t[3] : '') : t[1];
  }

Мое поле ввода HTML: 

        <input 
          required 
          maxlength=10 
          formControlName="parentOneDob" 
          type="text" 
          placeholder="MM/DD/YYYY" 
          class="form-control" 
          id="parentOneDob"
          (input)="maskInputDate($event)" 
        >
        <div *ngIf="sectionTwo.parentOneDob.errors && sectionTwo.parentOneDob.touched"
          class="alert text-danger m-0 p-0 col-md-12">
          Enter parent1 date of birth
        </div>
...