在Angular中动态地将控件添加到FormGroup

Posted 2023-03-13

【中文标题】在Angular中动态地将控件添加到FormGroup

【英文标题】：addControl to FormGroup dynamically in Angular

【发布时间】：2018-05-14 09:39:33

【问题描述】：

如何在 Angular 中动态地将 FormControl 添加到 FormGroup？

例如， 我想添加一个强制控件，名称为“new”，默认值为 ''。

【问题讨论】：

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

就像 Siro 回答了您的问题一样，您可以使用 addControl 方法向表单组添加新的输入。我有一个研究动态形式的小项目。我希望哪个有用。 stackblitz.com/edit/angular-eypxbq?embed=1&file=src/app/…

【参考方案1】：

addControl 是您所需要的。请注意，第二个参数必须是 FormControl 实例，如下所示：

this.testForm.addControl('new', new FormControl('', Validators.required));

如果需要，您还可以使用setValidators 方法动态添加验证器。调用它会覆盖任何现有的同步验证器。

【讨论】：

抱歉，如何包含多个验证器，例如 this.testForm.addControl('new', new FormControl('', [Validators.required, Validators.max(100)]) ;

像魅力一样工作。

【参考方案2】：

如果您在表单中使用FormBuilder，您也可以使用它来添加控件：

constructor(private fb: FormBuilder)  
    
method() 
  this.testForm.addControl('new', this.fb.control('', Validators.required));

【讨论】：

在值更改订阅中添加控件时如何停止事件发射？

【参考方案3】：

简单使用：

  this.testForm.addControl('new', this.fb.group(
      name: ['', Validators.required]
    ));

【参考方案4】：

import  FormBuilder, FormControl, FormGroup, Validators  from '@angular/forms';
@Component(
  selector: 'app-component-name',
  templateUrl: './component-name.component.html',
  styleUrls: ['./component-name.component.scss']
)
export class ComponentName implements OnInit 

    formGroup: FormGroup;        
    constructor(private formBuilder: FormBuilder) 

    ngOnInit() 
       this.formGroup = this.formBuilder.group(
        firstName: new FormControl('', Validators.required),
        lastName:  new FormControl('', Validators.required),
      );    
    
    
    // Add single or multiple controls here
    addNewControls(): void 
      this.formGroup = this.formBuilder.group(
         ...this.formGroup.controls,
         email: ['', Validators.required],
         phone: ['', Validators.required]
      );