1

我在我的输入表单中使用 flatpickr 模块进行日期选择。此输入表单位于 Angular mat-dialog 中。
面临以下问题：
1. 打开 mat-dialog 时，下拉日历会自行打开。只有当鼠标点击事件发生在 mat-dialog 的表单元素内时，它才应该打开。Mat-Dialog-GUI
2. 在日期选择中，绑定到角度变量的值不正确。它采用最后选择的值而不是当前值。当日历在第一次加载对话框时自行打开时，在日期选择“3rd Sep”上，元素的值被绑定为“null”而不是选定的日历日期。然后，再次选择日期“5th Sep”时，值将绑定为“3rd Sep”而不是 5th。Then, when "7th Sep" is selected, 浏览器控制台日志

以下是 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;
}
4

1 回答 1

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
      >
于 2018-09-03T05:37:43.267 回答