web-dev-qa-db-ja.com

新しいFormGroupまたはFormControlをフォームに追加する方法

次のform in Angularで作成されたFormBuilder

constructor(private fb: FormBuilder) {
    this.myForm = fb.group({
        'name': ['', [Validators.required],
        'surname': ['', [Validators.required],
        'email': ['', [validateEmail]],
        'address': fb.group({
            'street': [''],
            'housenumber': [''],
            'postcode': ['']
        }, { validator: fullAddressValidator })
    });
}

FormControlやnew FormGroupなどの新しいフィールドをプログラムでmyFormに追加する方法はありますか?

オンデマンドまたはいくつかの条件で新しいフィールドを追加する場合、constructorで最初に作成された同じフォームにアイテムを追加する方法を意味しますか?

19
smartmouse

ドキュメント に従って FormGroup クラスのaddControlメソッドを使用できます

だからあなたは以下のようにすることができます:

this.myForm.addControl('newcontrol',[]);
28
ranakrunal9

@ ranakrunal9が言ったことを付け加えます。

AddControlでvalidatorsを使用する場合は、次の手順を実行します。

this.myForm.addControl('newControl', new FormControl('', Validators.required));

次のインポートを追加することを忘れないでください

import {FormControl} from "@angular/forms";

AddControlへの参照: https://angular.io/api/forms/FormGroup#addControl

FormControlへの参照: https://angular.io/api/forms/FormControl

17
Stas Sorokin

私の意見では、この目的のために中間変数を使用することができます。次の例を見てください。

  constructor(private fb: FormBuilder) {
    let group = {
      'name': ['', [Validators.required]],
      'surname': ['', [Validators.required]],
      'email': ['', [Validators.required]]
    };

    let middlename = true;

    if(middlename) {
      group['middlename'] = ['', [Validators.required]];
    }

      this.myForm = fb.group(group);
    }

また、コンポーネントコンストラクターではなく、ngOnInitフックでフォームの開始を転送することをお勧めします。

7
Boris Siscanu