My goal is to display the data retrieved from FireStore in the screen fields upon loading. However, the buildForm() function is being called before subscribing to the data, resulting in the failure to populate the screen fields with the FireStore data.
perfil-model.ts:
export class Perfil {
nome: string;
}
authService.ts:
getPerfil() {
return this.afs.doc<Perfil>(`perfil/${this.id}`)
.snapshotChanges()
.map(p => {
return { ...p.payload.data() };
});
}
perfilUser.component.ts:
perfil: Perfil = new Perfil();
perfilForm: FormGroup;
ngOnInit() {
const subscribe = this.authService
.getPerfil()
.subscribe((p: any) => {
subscribe.unsubscribe();
this.perfil = p;
})
this.buildForm();
}
buildForm() {
this.perfilForm = this.formBuilder.group({
nome: this.perfil.nome,
});
}
perfilUser.component.html:
<form [formGroup]="perfilForm" novalidade>
<div class="row">
<div class="form-group col-12 col-sm-12 col-md-7 col-lg-4 col-xl-4">
<label for="name">Nome*</label>
<input type="text" class="form-control" formControlName="nome" placeholder="Nome">
</div>
</form>
Although I've confirmed that FireStore values are being returned, I'm struggling to display them on the screen.