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

Question

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

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

简单使用：

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

Answer 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]
      });
    }
}

Answer 5

我在 Angular 12 中遇到了同样的问题。以下代码片段非常适合我。

声明形式：

public form: FormGroup;

为窗体创建一个新控件：

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

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

addControl to FormGroup dynamically in Angular

form-control

angular

angular-reactive-forms