web-dev-qa-db-ja.com

設定Angular 2 Reactive FormのFormArray値？

ここにはすでに同様の質問があります（ 設定初期値Angular 2反応形式配列 ）が、答えに満足していないか、他の解決策を探している可能性があります。

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

だから私の質問は、ngOnInit（）に次のアドレスのようにあるかどうかです：this._fb.array（[]）//空白リスト私のTypeScript配列で？

javascriptangularformsangular-reactive-formsreactive-forms
8
Dany

値を設定し、FORM配列から値を削除するには、以下のコードを参照してください。これは一般的な例です。コードに合わせてください

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


    // Here I'm setting only one value if it's multiple use foreach        
    public setFormArrayValue() {
        const controlArray = <FormArray> this.settingsForm.get('collaborators');
        controlArray.controls[0].get('email').setValue('[email protected]');
        controlArray.controls[0].get('role').setValue(2);
    }

    // Here removing only one value if it's multiple use foreach        
    public removeFormArrayValue() {
        const controlArray = <FormArray> this.settingsForm.get('collaborators');
        controlArray.removeAt(0);        
    }
}
5
Praveen M P

同じ問題が発生しています。ここに私がそれをする方法があります：

あなたが言及したように、あなたはこのようにフォーム配列を初期化します：

  addresses: this._fb.array([])

次に、ngOnInit（）（または私の場合はionViewDidLoad（）の内部でIonic 2）を使用して、非同期操作を実行してリモートデータベースにアクセスし、promiseまたはobservable（および次に、フォーム配列とフォーム配列がある場合はsetValueを使用しないでください。

FormArrayの場合は、次のようにします。

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

Data.addressesはアドレスの配列です（前の操作と同じフォームから作成します）。

これがあなたの質問と私の問題を解決してくれることを願っています:) FormArrayは強力です。

4
Hugh Hou

これは動作するコードです。プロジェクトに挿入してテストすることができます。

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, FormArray, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  private addresses: string[] = ['Address 1', 'Address 2', 'Address 3'];
  private form: FormGroup;

  constructor(private formBuilder: FormBuilder){}

  ngOnInit(){
    // Init Form
    this.form = new FormGroup({
      'userData': new FormGroup({
        'username': new FormControl(null, [Validators.required]),
        'email': new FormControl(null, [Validators.required, Validators.email])
      }),
      'addresses': new FormArray([])
    });

    // If you want to insert static data in the form. You can use this block.
    this.form.setValue({
      'userData': {
        'username': 'Vic',
        'email': '[email protected]'
      },
      'addresses': [] // But the address array must be empty.
    });

    // And if you need to insert into the form a lot of addresses. 
    // For example, which belong to one user and so on. 
    // You must use this block. 
    // Go through the array with addresses and insert them into the form.
    this.addresses.forEach((value) => {
      const control = new FormControl(value, Validators.required);
      (<FormArray>this.form.get('addresses')).Push(control);
    });
    // Or you can use more better approach. But don't forget to initialize FormBuilder.
    this.form.setControl('addresses', this.formBuilder.array(this.addresses || []));

  }
}
1
Victor Isaikin