Formbuilder angolare 2 con valori osservabili come valori predefiniti

Question

Ho un problema con il valore predefinito di un modulo Angular 2 (formbuilder): I miei valori predefiniti sono osservabili (che sto recuperando da un server), quindi non posso implementarli in questo modo:

export class UserComponent implements OnInit{ 

userForm: ControlGroup; 
userData: any; // Initialise the observable var 

ngOnInit():any { 

    this.userData = this._dataService.getAllData() // My Observable 
     .subscribe(
      data => { 
       this.userData = data; 
      } 
     ); 

    this.userForm = this._formBuilder.group({ 
        // below the default value 
     'username': [this.userData.username, Validators.compose([ 
      this.usernameValid 
     ])] 
} 

Qualcuno un'idea di cosa ho bisogno di cambiare? Perché il modulo non visualizza nulla all'interno dei campi di input ...

Answer 1

Vorrei provare questo perché i dati vengono caricati in modo asincrono. Quindi è necessario aggiornare il valore degli elementi del modulo quando la risposta è lì/ricevuta.

ngOnInit():any { 
    this.userData = this._dataService.getAllData() 
    .subscribe(
     data => { 
     this.userData = data; 
     this.userForm.controls.username.updateValue(
       this.userData.username); 
     } 
    ); 

    this.userForm = this._formBuilder.group({ 
    'username': [this.userData.username, Validators.compose([ 
     this.usernameValid 
    ])]; 
} 

Answer 2

Si dovrebbe anche essere in grado di fare questo:

data: Observable<any>; 

ngOnInit():any { 

    this.data = this._dataService.getAllData(); 

    this.data 
     .map((data) => { 
     return this._formBuilder.group({ 
      username: [ this.data.username, 
       Validators.compose([this.usernameValid]) 
      ] 
     }) 
     .subscribe((userForm) => { 
     this.userForm = userForm 
     }) 

} 

Poi nel modello usa il tubo async come così:

<form *ngIf="data | async" [formGroup]="userForm"> 
    //...// 
</form> 

In questo modo non c'è bisogno di chiamare updateValue() e rende le cose un po 'più facili da mantenere se si hanno molti campi diversi che hanno tutti bisogno dei loro valori di default impostati da osservabili.