two way binding with firestore and reactive forms

[Michael]

Hi,

How can i two way bind a firestore timestamp in an edit form?

the form is populated with everything except the timestamp from firestore. 

async getEvent() {

const docRef = doc(this.fs, 'events', this.eventId)

const snapshot = await getDoc(docRef)

if (snapshot.exists()) {

this.frmEvent.patchValue(snapshot.data()

)

} else {

console.log("No such document!");

}

}

[Sureshkumar P]

Hi Michael,

Based on your shared information; cannot be replicated the reported issue on our end.

Find the validated code example here:

import { Component } from '@angular/core';

import { FormBuilder, FormGroup } from '@angular/forms';

@Component({

  selector: 'app-root',

  template: `<form [formGroup]="form">

  <div class="label-line">At Fault</div>

  <ejs-datetimepicker formControlName="datetime" name="datetime" placeholder='Select a date and Time'

                        floatLabelType='Always'>

                    </ejs-datetimepicker>

</form>

<button (click)="buttonClick()">ClickToUpdatePatchValue</button>

{{ this.form.getRawValue() | json}}

`,

})

export class AppComponent {

  form: FormGroup;

  snapshot: Date = new Date(2022, 2, 2);

  constructor(private fb: FormBuilder) {

    this.form = this.fb.group({

      datetime: this.snapshot,

    });

  }

  buttonClick() {

    this.form.patchValue({

      datetime: new Date(),

    });

  }

}

 

 

Find the sample here: https://stackblitz.com/edit/angular-snprkn-tjkcjd?file=app.component.ts

If still, you have faced the same issue, then replicate the reported issue on the above sample and revert us with a detailed issue replication procedure. These details will help us to provide an exact solution as earlier as possible.

Regards,

Sureshkumar P

[Michael]

Hi,

Thanks for your reply.

Firestore is the latest (version 9: modular)

I created variables for each form control (e.g. _title, _subtitle, _location, _eventDate, etc) , then assigned the snapshot data for each variable from the database:

const data = snapshot.data()
this._title = data['title']
this._subtitle = data['subTitle']
...
this._eventDate = data['eventDate']

this.frmEvent.patchValue({

eventDate: this._eventDate.toDate(), // need this as a locale (e.g. 'dd/MM/yyyy')

title: this._title,

...

})

All works fine thank you.

Michael

[Shereen Shajahan]

Glad to know the issue is resolved. Please get back to us for more assistance in the future.