Как проверить дату в приложении Angular 5 с помощью datepicker?

Question

У меня есть текущий шаблон:

<input type="text" class="datepicker" name="my_date" placeholder="mm/dd/yyyy" #myDate="ngModel" [(ngModel)]="myDate" id="my_date">
<div class="error_message" *ngIf="myDate.errors?.invalidDate">
    Please enter valid date
</div>

У меня есть следующий код в onInit:

setTimeout(function () {
      $('.datepicker').datepicker({
        autoclose: true,
        dateFormat: 'MM/dd/yyyy'
      }).on('hide', function(e) {
          $('.datepicker').blur();
      });    
    }, 10);

А при сохранении компании у меня логика проверки:

if (validateDate(this.myDate) == false) {     
        myFormDirective.form.controls['my_date'].setErrors({'invalidDate': true});
    }   

Проблема в том, что когда дата недействительна, дата выбирается сегодня вместо даты, когда ONBLUR. Для объяснения вопроса я приведу 2 сценария: 1. 03/10/1800 является недействительной датой (менее 1900), и при срабатывании onblur ошибка отображается правильно. 2. 32.01.2002 не является действительной датой, но в этом случае средство выбора даты вместо этого выбирает другую действительную дату в 2002/01/2002 вместо отображения ошибки.

Есть идеи, как убедиться, что проверка происходит при размытии?

Answer 1

Я бы настоятельно рекомендовал вам убрать jQuery datepicker для более современного компонента Angular datepicker.Есть много возможных вариантов.Проблема заключается в том, что подход двух структур к манипулированию DOM по своей сути не совпадает.jQuery изменяет DOM после его создания, в то время как Angular создает DOM так, что он всегда будет в правильном состоянии, в зависимости от вашей модели.Хотя вы все еще можете использовать их вместе, это, вероятно, не лучший подход к проектированию.

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

import { Component } from '@angular/core';
 
@Component({
  selector: 'demo-datepicker-value-change-event',
  templateUrl: './value-change-event.html'
})
export class DemoDatepickerValueChangeEventComponent {
  data: Date;
  showWarning: boolean = false;
  
  onValueChange(value: Date): void {
    if(validateDatepicker(value)) showWarning = false;
    else showWarning = true;
  }
  
  validateDatepicker(value: Date){
    let isValid = false;
    //Custom validation here...
    return isValid;
  }
}

<div class="row">
  <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
    <input class="form-control"
           placeholder="Datepicker"
           bsDatepicker
           (bsValueChange)="onValueChange($event)">
  </div>
  <div *ngIf="showWarning">Enter a valid date</div>
</div>