48

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

是否存在一种以编程方式附加新字段的方法，例如FormControl或 new FormGroupto myForm？

我的意思是，如果我想按需或在某些条件下添加新字段，如何将项目添加到第一次在constructor?

4

4 回答 4

66

您可以按照文档使用FormGroupaddControl类的方法

所以你可以这样做：

this.myForm.addControl('newcontrol',[]);
于 2017-01-11T10:29:58.943 回答
51

补充@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

于 2018-07-15T08:06:34.407 回答
10

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

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

于 2017-01-11T12:05:55.253 回答
2

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

(this.myForm.get("form_group_name") as FormGroup).addControl("item1", new FormControl("default val"));
于 2020-11-17T19:02:39.530 回答