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

Posted 2023-03-13

【中文标题】如何将新的 FormGroup 或 FormControl 添加到表单

【英文标题】：How to append new FormGroup or FormControl to form

【发布时间】：2017-05-26 02:14:25

【问题描述】：

我在使用 FormBuilder 创建的 Angular 中有以下 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 中创建的同一个表单中？

【问题讨论】：

这也有帮助：***.com/questions/55334283/…

【参考方案1】：

您可以按照documentation使用FormGroup类的addControl方法

所以你可以这样做：

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

【讨论】：

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

如何在表单组中添加新的表单组

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

当我这样做时，我收到 Typescript 抱怨 Argument of type 'undefined[]' is not assignable to parameter of type 'AbstractControl'. Property 'validator' is missing in type 'undefined[]'

@CodyBugstein => this.myForm.addControl('newControl', new FormControl('', Validators.required));

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

【讨论】：

这是我的第一个实现，但我更喜欢使用 @ranakrunal9 的解决方案。无论如何，为什么在 ngOnInit 钩子中创建表单是一个更好的主意？

Boris Siscanu：你能告诉我为什么在 ngOnInit 而不是构造函数中启动表单更好吗？

Angular 文档说要在组件构造函数中启动它：angular.io/guide/reactive-forms#introduction-to-formbuilder

【参考方案3】：

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

【参考方案4】：

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

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