設定デフォルトのフォーム値

Question

私はngOnInit方法でフォームコントロールの値を開始しようとすると、私は次のエラーを取得する：

エラー

formGroup expects a FormGroup instance. Please pass one in. 

方法

ngOnInit() { 
    this.getBusinessData().then((response:any) => { 
     this.businessForm = this.formBuilder.group({ 
      'business_name': [response.data.business_name, Validators.required], 
      'email': [response.data.email, Validators.required] 
     }); 
    }); 
} 

私は、APIサービスコールからの約束を返すと、setValueを使ってこの問題を回避することができました。それは動作します：

ngOnInit() { 
     // Build the form 
     this.businessForm = this.formBuilder.group({ 
      'business_name' : ['', Validators.required], 
      'email' : ['', Validators.required], 
     }); 
     // Fetch data for the view 
     this.getBusinessData().then((response:any) => { 
      this.businessForm.setValue({ 
       business_name: response.data.business.business_name, 
       email: response.data.business.email 
      }); 
     }); 
    } 

しかし、これは最善の方法ではないようです。 APIからフォームコントロールに返されたデータをバインドするにはどうすればよいですか？私はformGroupsを使用すべきではないようで、おそらくフォームにデータをバインドするためにngModelsを使うだけでしょうか？

UPATE：

ngOnInit() { 
     // Bind data to the form 
     this.getBusinessData().then((response:any) => { 
      this.businessForm = this.formBuilder.group({ 
       'business_name' : [response.data.business.business_name==undefined?'': response.data.business.business_name, Validators.required], 
       'email' : [response.data.business.email==undefined?'': response.data.business.email, Validators.required] 
      }); 
     }); 
    } 

しかし、コンソールで次のエラーが返されます：micronyks方法と 、私は次のことを試してみました

EXCEPTION: Uncaught (in promise): Error: Error in edit.template.html:12:10 caused by: formGroup expects a FormGroup instance. Please pass one in. 

これはそれがラップされます場合に発生するようですAPIコールの周り。 の値はに上書きされていますか？

Answer 1

angle2レンダリングを表示する前に、this.businessFormインスタンスを設定する必要があります。 Solution_1：* ngIfを使用すると、formBuilderのインスタンスを設定した後にのみフォームを表示できます。 Solution_2：formbuilder this.businessFormにデフォルト値を設定し、APIからの応答を受け取ったらフォームを更新します。