Angular / Firestore - Как использовать временную метку Firestore в Angular Date Picker Reactive FormControlName? - PullRequest
Новая
       20

Angular / Firestore - Как использовать временную метку Firestore в Angular Date Picker Reactive FormControlName?

0 голосов
/ 16 октября 2018

У меня следующая структура:

  • Служба, которая извлекает мои данные и заполняет мою форму formBuilder
  • Мой HTML-код, отображающий форму

У меня есть несколько других полей, таких как заголовки, ссылки и т. Д., Которые все выглядят хорошо, и все обновляется нормально.Однако я не могу заставить дату Firestore появляться в средстве выбора даты.

Средство выбора даты является видимым, и я могу выбрать дату.Затем он становится красным, чтобы указать неправильное значение.При загрузке значение не отображается вообще.

Firestore возвращает значение в качестве метки времени при отладке в консоли.

Как заставить эту работу работать с инструментом выбора даты углового материала в FormControlName?

Служба личных данных 

export interface IProject {
  project_date: Date,
}

...

this.editForm = fb.group({
  project_date: [],
});

...


this.project$ = new BehaviorSubject({
   project_date: null,
});

...

  getProjectData(user_id, project_id) {
    this.projectDocRef = this.afs.doc(`users/${user_id}/projects/${project_id}`);
    this.projectDocument = this.projectDocRef.snapshotChanges();
    this.projectDocument.subscribe(value => {
      const project = value.payload.data() as IProject;
      this.project_id = value.payload.id;
      this.project$.next(project);
      this.editForm.patchValue(this.project$.getValue())
    });
  }

Моя HTML-форма 

<form *ngIf="user_id" [formGroup]="projectDetailService.editForm" fireForm path="users/{{user_id}}/projects/{{project_id}}"
      (stateChange)="changeHandler($event)">   

        <mat-form-field>
          <input matInput [matDatepicker]="picker1" placeholder="Date" formControlName="project_date">
          <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
          <mat-datepicker #picker1></mat-datepicker>
        </mat-form-field>

</form>
...