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

Question

我在 Angular 中使用 FormBuilder 创建了以下 form：

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 class as per documentation

的addControl方法

所以你可以按照下面的方式做:

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

Answer 2

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

  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 3

补充@ranakrunal9 所说的内容。

如果您想将 validators 与 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 4

我遇到了同样的问题，但由于我在主 FormGroup 中已经有一个空的 FormGroup {}，所以我能够像这样附加 FormControls：

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

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

How to append new FormGroup or FormControl to form

forms

angular

angular2-forms

angular2-formbuilder