Observablesをデフォルト値とするAngular 2 Formbuilder

Question

Angular 2 Form（formbuilder）のデフォルト値に問題があります。 デフォルト値はobservables（サーバーから取得しています）です。

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 
     ])] 
} 

誰かのアイデアを変更する必要がありますか？フォームは入力フィールド内に何も表示しないので...

Answer 1

データが非同期に読み込まれるため、これを試してみます。したがって、応答がある/受信されたときにフォーム要素の値を更新する必要があります。

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

また、この行うことができる必要があります：

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 
     }) 

} 

次に、あなたのテンプレートになるように非同期パイプを使用する：

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

この方法でupdateValue()をコールする必要はありませんあなたが観察可能なものから設定されたデフォルト値を必要とする多くの異なるフィールドを持っていれば、維持するのが少し楽になります。