Angular Flatpickr привязывает последнюю выбранную дату к модели вместо текущей выбранной даты

Question

Я использую модуль flatpickr для выбора даты в моих формах ввода. Эта форма ввода находится в угловом диалоговом окне.
Столкнувшись со следующими проблемами:
1. Раскрывающийся календарь открывается сам по себе, когда открывается диалоговое окно. Он должен открываться только тогда, когда происходит событие щелчка мыши внутри элемента формы в mat-диалоге. Мат-Dialog-GUI
2. При выборе даты значение, привязанное к угловой переменной, неверно. Он принимает последнее выбранное значение вместо текущего. Когда календарь открывается сам при первой загрузке диалога, при выборе даты "3 сентября" значение элемента связывается как "ноль" вместо выбранной календарной даты. Затем, снова, когда выбрана дата "5 сентября", значение связывается как "3 сентября" вместо 5-го. Затем, когда выбрано "7th Sep", значение связывается как 5th и так далее. Журналы консоли браузера

Вот фрагменты кода HTML и TS:

`<div class="container" *ngIf="(this.data.tabletype=='holidays')">
   <h3 mat-dialog-title>Add new holiday</h3>
   <form class="mat-dialog-content" (ngSubmit)="confirmAdd()" #formControl="ngForm">
<!--Contains mat-hint for characters count and has maxLength set-->
<div class="form">
  <mat-form-field color="accent" appearance="outline">
    <mat-label>Holiday Date</mat-label>
    <!--<input matInput #holidayfield1 (change)="onDateSelect($event)" class="form-control" type="date" placeholder="Holiday Date" [(ngModel)]="holiday.holidayDate" name="holidayDate" required>-->
    <input matInput id="datepicker"
      class="form-control"
      type="text"
      name="holidayDate"
      mwlFlatpickr
      [(ngModel)]="holiday.holidayDate"
      [altInput]="true"
      [convertModelValue]="true"
      [enableTime]="false"
      (change)="onDateSelect()"
      dateFormat="YYYY-mm-dd"
      altFormat="F j, Y"
      placeholder="Holiday Date"
      required
      >
    <mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>
</div>

<div class="form">
  <mat-form-field color="accent" appearance="outline">
    <mat-label>Week Day</mat-label>
    <input matInput #holidayfield2 class="form-control" type="text" placeholder="Week Day" [(ngModel)]="holiday.weekDayName" name="weekDayName" required>
    <mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>
</div>

<div class="form">
  <mat-form-field color="accent" appearance="outline">
    <mat-label>Description</mat-label>
    <input matInput #holidayfield3 class="form-control" type="text" placeholder="Description" [(ngModel)]="holiday.description" name="description" required maxlength="256">
    <mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
    <mat-hint align="end">{{holidayfield3.value?.length || 0}}/256</mat-hint>
  </mat-form-field>
</div>

<div mat-dialog-actions>
  <button mat-raised-button color="primary" [type]="submit" [disabled]="!formControl.valid" [mat-dialog-close]="1">Save</button>
  <button mat-raised-button color="primary" type="button" (click)="onNoClick()" tabindex="-1">Cancel</button>
</div>

onDateSelect() {
    let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    console.log(this.holiday.holidayDate);
    let d = new Date(this.holiday.holidayDate);
    console.log(d);
    console.log(d.getDay());
    let dayName = days[d.getDay()];
    this.holiday.weekDayName = dayName;
}

Answer 1

Проблема решена. Проблема заключалась в том, что с порядком, в котором события были запущены для <input>тег. (click) событие было вызвано раньше [(ngModel)] связывание. В результате значения не были доступны в onDateSelect() Обработчик событий, как привязка модели, не происходил до тех пор.
Заменены (click) с (ngModelChange) и это работало совершенно нормально.

<input matInput id="datepicker"
      class="form-control"
      type="text"
      name="holidayDate"
      mwlFlatpickr
      [(ngModel)]="holiday.holidayDate"
      (ngModelChange)="onDateSelect()"
      [altInput]="false"
      [convertModelValue]="false"
      [enableTime]="false"
      defaultDate="2016-10-20"
      dateFormat="Y-m-d"
      altFormat="F j, Y"
      placeholder="Holiday Date"
      required
      >