Angular2/4 füllen Formular nach Anfrage

Question

Ich benutze das gleiche Formular für Benutzer hinzufügen und Benutzer bearbeiten. Wenn ein Benutzer angemeldet ist, weiß ich, dass ich das Formular bearbeite und wenn ein Benutzer nicht eingeloggt ist und einen neuen Benutzer hinzufügt. Das Problem im Angesicht ist, dass, wenn Benutzer angemeldet ist ich die Back-End-API für Benutzerdaten abzufragen, um das Formular zu füllen und weil die GET Anfrage ist async das Formular ist bereits erstellt, bevor ich die Daten bekomme. Hier ist, was ich habe:

ngOnInit() { 

    let userData = null; 

    if (this.userService.userId) { // user is logged in, query for data 
     this.http.get('http://localhost/api/user/get/' + this.userService.userId) 
      .subscribe(
      (data) => { 
       userData = data.json(); 
      }, 
      (error) => { 

      } 
    ); 
    } 

//init form 
this.form = new FormGroup({ 
    id: new FormControl(userData ? userData.id : ''), 
    name: new FormControl(userData ? userData.name : '', Validators.required) 
}); 

} 

Eine Lösung, die ich gedacht ist, die Form init im get-Block zu duplizieren, nachdem ich die Daten erhalten, aber dieses dosent scheint wie eine gute Lösung, vor allem, wenn das Formular init kann alot haben von Feldern.

Was wäre eine saubere Lösung für diesen Fall?

Answer 1

Eine saubere Lösung für Ihr Problem würde so aussehen -

ngOnInit() { 
    let userData = null; 
    //init form 
    this.form = new FormGroup({ 
     id: new FormControl(userData ? userData.id : ''), 
     name: new FormControl(userData ? userData.name : '', Validators.required) 
    }); 


    if (this.userService.userId) { // user is logged in, query for data 
     this.http.get('http://localhost/api/user/get/' + this.userService.userId) 
     .subscribe(
      (data) => { 
      userData = data.json(); 
      this.form.patchValue({ 
       id: userData.id, 
       name: userData.name 
      }) 

      }, 
      (error) => { 

      } 
     ); 
    } 
    } 

Hinweis hier, dass die FormGroup initialisiert wird, bevor die GET Anforderung gesendet wird. Und später patchValue wird verwendet, um die neuen Werte an die

zu binden. Hoffe, dies hilft.