Как преобразовать формат эпохи для управления формой в matDatepicker - PullRequest
Новая
       46

Как преобразовать формат эпохи для управления формой в matDatepicker

0 голосов
/ 30 сентября 2019

У меня есть поле date_of_birth со строкой эпохи, сохраненной в нем. Я хотел использовать угловой инструмент выбора даты материала, чтобы изменить дату, которая возможна путем преобразования ее в 

//convert matDatepicker timestamp format to epoch and save
var newDOB = new Date(privateUser.date_of_birth).getTime().toString();
privateUser.date_of_birth = newDOB;

перед сохранением ее в БД, однако при попытке отобразить ее в рамках выбора даты в качестве даты по умолчанию,Я не очень уверен, как его вернуть.

это текущий код, который у меня есть 

<div *ngIf="(userPrivate$ | async) as userPrivate">
  <form (ngSubmit)="updateUser(user, userPrivate)">
    <mat-form-field >
      <input matInput type="text" [(ngModel)]="user.username" name="username" placeholder="Username">
    </mat-form-field >
    <mat-form-field >
      <input matInput [matDatepicker]="dp" placeholder="Date of Birth"   [(ngModel)]="userPrivate.date_of_birth" name="date_of_birth">
      <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
      <mat-datepicker #dp >
      </mat-datepicker>
    </mat-form-field>
  </form>
</div>

, и когда я попытаюсь добавить 

<mat-form-field >
  <input matInput [matDatepicker]="dp" placeholder="Date of Birth" [formControl]="userPrivate.date_of_birth"  [(ngModel)]="userPrivate.date_of_birth" name="date_of_birth">
  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
  <mat-datepicker #dp >
  </mat-datepicker>
</mat-form-field>

, я получуошибка, так как он не сможет прочитать значение, он также не может принять то, что я пытался сделать, добавив функцию для его преобразования из эпохи. 

<mat-form-field >
  <input matInput [matDatepicker]="dp" placeholder="Date of Birth" [formControl]="getDate(userPrivate.date_of_birth)"  [(ngModel)]="userPrivate.date_of_birth" name="date_of_birth">
  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
  <mat-datepicker #dp >
  </mat-datepicker>
</mat-form-field>

, где getDate(date) функция

getDate(date){
  // convert Epoch time to timestamp format
  var newDate= new Date(date).getTime();
  return newDate;
}

Как я могу приблизиться к этому, чтобы я мог ввести свои данные для отображения значения date_of_birth по умолчанию?

1 Ответ

0 голосов
/ 30 сентября 2019

Когда у вас есть другой формат даты в вашем средстве выбора даты по сравнению с вашей собственной структурой данных, в общем, у вас есть два варианта: 1) как-то сказать компоненту datePicker преобразовать его структуру данных в ваши, это обычно делается черезпередача класса адаптера 2) разрешите datePicker передавать свой собственный формат данных в форму или модель и выполнять преобразование только вручную, когда вы публикуете форму или устанавливаете значение формы.

Использование адаптера

На самом деле средство выбора даты действительно дает вам возможность предоставить адаптер, использование довольно хорошо описано в https://material.angular.io/components/datepicker/overview

Преобразование вручную

При преобразовании вручную необходимо выполнить преобразование из структуры данных в структуру выбора даты, чтобы установить начальное значение и когда родительский компонент обновит значение формы. И вы должны выполнять преобразование в обратном направлении всякий раз, когда хотите сохранить данные из формы.

Поэтому вам не нужно добавлять метод преобразования в шаблон каким-либо образом, выполните преобразование в отправке. метод. Что действительно неверно в вашем примере, так это то, что [formControl] ожидает элемент управления угловой формы, а не значение (в данном случае сама дата).

Лично я бы пошел с решением для адаптера, потому что таким образомлогика преобразования не разбросана, а сосредоточена на конкретном классе, который также легче тестировать.

Совершенно несвязанная заметка

В общем, старайтесь невызывать методы в привязках значений, например.

<input matInput [formControl]="getDate(userPrivate.date_of_birth)" > (некоторые атрибуты для краткости опущены)

Эти методы вызываются при каждом обнаружении изменений (что может происходить довольно часто, особенно если вы неt ChangeDetectionStrategy.onPush), поэтому преобразование выполняется при каждом обнаружении изменений, даже если исходное значение не изменилось.

Очень сложно скрыть сложные вычисления в этих связанных методах, которые могут значительно замедлитьвниз вашего приложения.

Вместо этого выполняйте вычисления только при изменении исходного значения, сохраняйте результат в поле компонента, связывайте это полев шаблоне.

...