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

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

0 голосов
/ 03 сентября 2018

Я использую модуль flatpickr для выбора даты в моих формах ввода. Эта форма ввода находится в угловом диалоговом окне.
Столкнулся с следующими проблемами:
1. Раскрывающийся календарь открывается сам по себе, когда открывается диалоговое окно. Он должен открываться только тогда, когда происходит событие щелчка мыши внутри элемента формы в mat-диалоге. 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;
}

1 Ответ

0 голосов
/ 03 сентября 2018

Проблема решена. Проблема заключалась в том, что с порядком, в котором события были запущены для тега <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
      >
...