Question

我在输入表单中使用flatpickr模块进行日期选择。此输入形式在“角度垫”对话框中。
遇到以下问题：
1.打开mat-dialog时，下拉日历会自动打开。仅当在mat-dialog中的表单元素内发生鼠标单击事件时，才应打开它。 Mat-Dialog-GUI
2.在选择日期时，绑定到角度变量的值不正确。它采用最后选择的值，而不是当前值。当首次加载对话框时，在日期选择“ 3rd Sep”上自行打开日历时，元素的值将绑定为“ null”，而不是所选的日历日期。然后，再次选择日期“ 9月5日”时，将值绑定为“ 9月3日”，而不是5日。然后，当选择“ 9th Sep”时，将值绑定为5th，依此类推。 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将最后选择的日期绑定到模型，而不是当前选择的日期

1 个答案: