2角度：どのように

Question

formgroupベースのモデルを作成する前に、サービスからのデータをロードするために、私は私が私のコンポーネントで、このようなフォームグループを持つ角度2のWebPACKでページを持っている：私はそのコードを実行する瞬間に

this.myForm = this._fb.group({ 
    date_of_visit: ['', [<any>Validators.required]] 
}); 

ngOnInit()に、私のデータは私のサービスを介して準備ができたときにコールバック関数が呼び出された後、再びそれを実行します。私のデータがデータベースから取得されたとき

setFormsData(d) { 
    this.myForm = this._fb.group({ 
     date_of_visit: [d.date_of_visit, [<any>Validators.required]] 
    }); 
} 

setFormsDataが呼び出されます。ですから、現時点ではngOnInitのフォームを初期化し、新しいデータを補充して、両方のバリデーターを持っています。

QUESTION： どのようなデータを持つフォームをiniliazeする正しい方法がある、と私は二度私のフォームで同じコードを実行する必要がないようにどのように私は私のページの前に自分のデータをロードしていますか？

ソース画面：

https://gyazo.com/21347a7876e9d8289f5e3e72191baaeb https://gyazo.com/cdf80721d12c531f7c0d9aa420f31691

Answer 1

は、空のフォームでngOnInitでフォームグループを初期化することができます。そして、ここでフォームを初期化した後、非同期リクエストをサーバーに送ります。ここでは、サブスクリプションでupdateValueAndValidity（）を呼び出すことができます。

ngOnInit() { 
    // init form here with validators etc... 

    someService.getData().subscribe(
     response => { 
      this.data = response.json(); 
      this.myForm.updateValueAndValidity(); 
     } 
    ) 
} 

Answer 2

https://angular.io/guide/reactive-forms

フォーム上のsetValueメソッドを使用します。

setFormsData(d) { 
    this.myForm.setValue(d); 
}