We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

two way binding with firestore and reactive forms

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!");
}
}



3 Replies

SP Sureshkumar P Syncfusion Team November 15, 2022 06:36 AM

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 { FormBuilderFormGroup } 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 {

  formFormGroup;

  snapshotDate = new Date(202222);

  constructor(private fbFormBuilder) {

    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



MI Michael November 15, 2022 05:55 PM

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




SS Shereen Shajahan Syncfusion Team November 16, 2022 02:08 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon