Join the Observable and formControl in Angular 4 by subscribing

Question

Join the Observable and formControl in Angular 4 by subscribing

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.

angular typescript firebase google-cloud-firestore angularfire2

Answer 1

Answer №1

Implement patchValue within the subscribe method

this.authService
    .fetchProfile()
    .subscribe((profile: any) => {
      this.profileForm.patchValue({'name' : profile.name})
    })

Answer 2

Implement patchValue within the subscribe method

this.authService
    .fetchProfile()
    .subscribe((profile: any) => {
      this.profileForm.patchValue({'name' : profile.name})
    })

Answer 3

Answer №2

To ensure that the observable populates your form, you need to invoke the buildForm method within the subscribe function or alternatively set values within the subscribe function. Below is an illustration of this concept:

perfil.component.ts

nome:string;
constructor(){
    this.perfilForm = new FormGroup({
       "nome": new FormControl(this.nome)
    });
}    

ngOnInit() {
    const sub = this.authService
    .getPerfil()
    .subscribe((p: any) => {
         sub.unsubscribe();
         this.nome = p.nome;
    })
  }

perfil.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" [(ngModel)]="nome">
      </div>
    </div>
</form>

Answer 4

To ensure that the observable populates your form, you need to invoke the buildForm method within the subscribe function or alternatively set values within the subscribe function. Below is an illustration of this concept:

perfil.component.ts

nome:string;
constructor(){
    this.perfilForm = new FormGroup({
       "nome": new FormControl(this.nome)
    });
}    

ngOnInit() {
    const sub = this.authService
    .getPerfil()
    .subscribe((p: any) => {
         sub.unsubscribe();
         this.nome = p.nome;
    })
  }

perfil.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" [(ngModel)]="nome">
      </div>
    </div>
</form>

Answer 5

Answer №3

Issue with Saving Blank Fields

Error message: When leaving a blank field, it is not saved as an empty string and results in an error.

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" [(ngModel)]="perfil.nome" formControlName="nome" placeholder="Full Name">
  </div>

<button class="btn btn-success" type="button" (click)="saveProfile()">Save</button>

</form>

perfilUser.component.ts:

perfil: Perfil = new Perfil();

  saveProfile() {
    this.authService.createProfile(this.perfilForm.value);
  }

authService.ts:

@Injectable()
export class AuthService {

  perfil: Observable<Perfil[]>;
  userId: string;

  constructor(private afs: AngularFirestore) {
    this.afAuth.auth.onAuthStateChanged((user) => {
      if (user) {
        this.userId = user.uid;
      }
    })
}

createProfile(perfil: Perfil) {
    const userRef: AngularFirestoreDocument<Perfil> = this.afs.doc(`perfil/${perfil.userId}`);
    return userRef.set(perfil);
  }

perfilModel.ts:

export class Perfil {
    nome: string;
    ..... : string;
    ..... : string;
}

the rest of the code is at the beginning of the question

Answer 6

Issue with Saving Blank Fields

Error message: When leaving a blank field, it is not saved as an empty string and results in an error.

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" [(ngModel)]="perfil.nome" formControlName="nome" placeholder="Full Name">
  </div>

<button class="btn btn-success" type="button" (click)="saveProfile()">Save</button>

</form>

perfilUser.component.ts:

perfil: Perfil = new Perfil();

  saveProfile() {
    this.authService.createProfile(this.perfilForm.value);
  }

authService.ts:

@Injectable()
export class AuthService {

  perfil: Observable<Perfil[]>;
  userId: string;

  constructor(private afs: AngularFirestore) {
    this.afAuth.auth.onAuthStateChanged((user) => {
      if (user) {
        this.userId = user.uid;
      }
    })
}

createProfile(perfil: Perfil) {
    const userRef: AngularFirestoreDocument<Perfil> = this.afs.doc(`perfil/${perfil.userId}`);
    return userRef.set(perfil);
  }

perfilModel.ts:

export class Perfil {
    nome: string;
    ..... : string;
    ..... : string;
}

the rest of the code is at the beginning of the question

Join the Observable and formControl in Angular 4 by subscribing

Answer №1

Answer №2

Answer №3

Issue with Saving Blank Fields

Similar questions

Is there a way to search through an array of object arrays in JavaScript for a specific key/value pair using lodash or any other function?

Using Regular Expressions as an Alternative to Conditionals

Updated the application to Angular 6 but encountered errors when attempting to run npm run build --prod. However, running the command npm run build --env=prod was executed without any issues

Exploring the Incorporation of String as a Component Identifier in React and TypeScript

What is the method for passing an element in Angular2 Typescript binding?

Leveraging Angular for Parsing JSON Data

Quirky happenings in Typescript

Testing HTTP Requests in Angular applications

Managing dynamic text within a label using Playwright

Error with Array type encountered in Typescript's find method

Loading the Angular 2 library with the help of SystemJS

A guide to implementing angularjs app.service and $q in typescript

Ensuring the completion of all validations in Angular 4

Unable to iterate over a JSON response from a POST request in Angular 8

To successfully transfer a file (whether it be an excel or csv file) into a nodejs environment and then have it update in a mongodb database, follow

Tips for obtaining a redirect URL using Angular5

Using HttpClient to post data to Django backend for seamless information transfer

A guide on passing an ngFor object variable to a function

Create a variable and save data into it

Angular 2.0's development of modules and implementation of shadow DOM focuses on supporting a left