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