Question

我在Angular中使用form创建了以下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或新FormGroup等新字段附加到myForm的方法？

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

Answer 1

您可以按FormGroup

使用documentation类的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挂钩中转移表单启动，而不是组件构造函数。

Answer 4

我遇到了同样的问题，但是由于我在主FormGroup中已经有一个空的FormGroup {}，因此我可以像这样附加FormControl：

(this.myForm.get("form_group_name") as FormGroup).addControl("item1", new FormControl("default val"));

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

4 个答案: