Angular Flatpickr 将最后选择的日期而不是当前选择的日期绑定到模型

Question

我在输入表单中使用 flatpickr 模块来选择日期。此输入表单位于 Angular mat 对话框中。
面临以下问题：
1. 打开 mat-dialog 时，下拉日历会自行打开。它应该只在 mat-dialog 中的表单元素内发生鼠标单击事件时打开。 Mat-Dialog-GUI
2. 在选择日期时，绑定到 angular 变量的值不正确。它采用最后选择的值而不是当前值。当日历在第一次加载对话框时自行打开时，在日期选择“9 月 3 日”时，元素的值被绑定为 "null" 而不是选定的日历日期。然后，再次选择日期“9 月 5 日”时，值将绑定为“9 月 3 日”而不是 5 日。 Then, when "7th Sep" is selected, value is binded as 5th and so on. Browser Console Logs

这里是 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
      >

Angular Flatpickr 将最后选择的日期而不是当前选择的日期绑定到模型

Angular Flatpickr binds last selected date to model instead of current selected date

angular-material

flatpickr

angular