Angular 2 FormArrayの値をReactiveFormに設定していますか？

Question

すでに似た質問がありますが（Setting initial value Angular 2 reactive formarray）、私は答えに満足していないか、あるいは他の解決策を探しています。

FormArrayを持つことのポイントは、オブジェクトの配列を渡すことであり、同じ数のコンポーネントを作成する必要があると思います。しかし、上記の例では、提供されたプランカーを見ると、2つのAddressesオブジェクトを指定した後でも、空白のバージョンがngOnInit（）ですでに作成されているため、1つのAddressが作成されました。

ngOnInit（）では、このアドレスが好きです：this._fb.array（[]）//空白リスト 次に、N個のアドレスを動的に作成する値を設定する必要があります私のTypeScript配列のN個のアドレスから？

Answer 1

私は同じ問題を抱えています。ここで私はそれを行う方法です。

あなたが述べたように、あなたはこのようなあなたのフォームの配列を初期化します。そして、

addresses: this._fb.array([]) 

ngOnInit（）内の（あるいは私の場合ionViewDidLoad（）内 - イオン2を使用）、おあなたのリモート・データベースにヒットし、約束または観測可能な（そして観測可能なものに加入して）値を返すために、非同期操作を行います。次に、formValue以外のすべてのフォームコントロールにpatchValueを設定します（フォームグループとフォーム配列がある場合はsetValueを使用しないでください!!）。 formArrayについては

、この操作を行います。data.addresses（。あなたが前の操作で同じフォームからそれらを作成する）アドレスの配列である

ホープこれはとしてあなたの質問を解決

this.yourForm.setControl('addresses', this.fb.array(data.addresses || [])); 

をよく私のように:) FormArrayは強力です、それを正しく使用する方法を教えるためのより多くのリソースがあれば幸いです。

Answer 2

このコードは、フォームの配列値を設定し、削除するのに役立ちます...あなたのコード

import { FormArray, FormBuilder, FormGroup} from '@angular/forms'; 

export class SomeComponent implements OnInit { 

consutructor(public fb:FormBuilder) { } 

    public buildcollaboratorsGroup(fb:FormBuilder):FormGroup { 
     return fb.group({ 
          email:'', 
          role:'' 
       }); 
    } 

ngOnInit() { 
    public settingsForm: FormGroup = this.fb.group({ 
    collaborators:this.fb.array([this.buildcollaboratorsGroup(this.fb)]) 
    });  

    this.setFormArrayValue(); 
} 


    // I am trying set only one value if it's multiple use foreach   
    public setFormArrayValue() { 
     const controlArray = <FormArray> this.settingsForm.get('collaborators'); 
     controlArray.controls[0].get('email').setValue('yourEmailId@gmail.com'); 
     controlArray.controls[0].get('role').setValue(2); 
    } 

    // I am trying remove only one value if it's multiple use foreach   
    public removeFormArrayValue() { 
     const controlArray = <FormArray> this.settingsForm.get('collaborators'); 
      controlArray.removeAt(0);   
    } 
}