如何将新的FormGroup或FormControl附加到表单

Question

我form在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 })
    });
}

是否存在以编程方式附加新字段(如FormControlnew或new)的FormGroup方法myForm？

我的意思是,如果我想按需或在某些条件下添加新字段,如何将项目添加到第一次创建的同一表单中constructor？

Answer 1

您可以根据文档使用FormGroup类的addControl方法

所以你可以这样做:

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

Answer 2

添加@ ranakrunal9所说的内容.

如果您想在addControl中使用验证器,请执行以下操作:

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

Answer 3

我认为，您可以为此目的使用中间变量。看下一个例子：

  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挂钩中而不是组件构造函数中传递表单初始化。