如何向表单添加新的FormGroup或FormControl

Question

我在使用 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或新的FormGroup到myForm中？

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

- smartmouse

---

这可能会有所帮助：https://dev59.com/clMI5IYBdhLWcg3wyurE - user3025289

Answer 1

您可以根据文档使用FormGroup类的addControl方法。因此，您可以按如下方式执行：

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

- ranakrunal9

---

我遇到了这个问题，当使用循环时，必须导入FormArray并像这样添加它： this.myForm.addControl(i, new FormArray([])); 同样，您也可以使用FormGroup添加对象。 - Caleb Swank

如何在一个 FormGroup 中添加一个新的 FormGroup？ - lpradhap

@lpradhap 你可以以同样的方式添加它。即：this.myForm.addControl('newcontrol', this.fb.group({ ... })) - hogan

当我这样做时，Typescript会抱怨类型为'undefined[]'的参数无法分配给类型为'AbstractControl'的参数。在类型'undefined[]'中缺少属性'validator'。 - CodyBugstein

@CodyBugstein => this.myForm.addControl('newControl', new FormControl('', Validators.required));@CodyBugstein => this.myForm.addControl('newControl', new FormControl（''， Validators.required））; - Achraf Farouky

Answer 2

根据@ranakrunal9所说的，如果你想在使用"addControl"时使用"validators"，请执行以下操作：

要添加到@ 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

- Stas Sorokin

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钩子中传递表单初始化会是一个更好的想法，而不是在组件构造函数中进行。

- Boris Siscanu

---

这是我的第一个实现，但我更喜欢使用@ranakrunal9的解决方案。不管怎样，为什么在ngOnInit钩子中创建表单是一个更好的想法呢？ - smartmouse

Boris Siscanu: 你能告诉我为什么在ngOnInit中初始化表单比在构造函数中更好吗？ - smartmouse

Angular文档中指出，在组件构造函数中初始化：https://angular.io/guide/reactive-forms#introduction-to-formbuilder - smartmouse

Answer 4

我曾经遇到过同样的问题，但由于我的主FormGroup中已有一个空的FormGroup {}，因此我可以像这样添加FormControls：

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

- O-9