如何从嵌套的 FormGroup 添加/删除 FormControl

Question

candidateForm:FormGroup;
constructor(private fBuilder: FormBuilder){ }

ngOnInit(){
    this.candidateForm = this.fBuilder.group({
      fname: [null, [Validators.required]],
      lname: [null, [Validators.required]],
      address: this.fBuilder.group({
        address1: [null],
        address2: [null],
      })
    })
  }

如何将名为 address3 的 FormControl 添加到表单组 address ？同样如何从同一个 FormGroup 中删除它们？

原文由 Apar Adhikari 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

首先，您必须从主 FormGroup 获取子 FormGroup，然后您可以使用此处文档中引用的 addControl 和 removeControl： https ://angular.io/api/forms/FormGroup。

所以在你的情况下它将是：

 //Add:
this.candidateForm.get('address').addControl('address3',[]);

//Remove:
this.candidateForm.get('address').removeControl('address2');

原文由 Erex 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我尝试了 Adhikari 的回答，但对我不起作用，它总是抛出错误：

 error TS2339: Property 'addControl' does not exist on type 'AbstractControl'.

他的回答帮助我思考，最后我得出了这个结论：

像这样在任何地方写一个 getter 属性（以获取组）：

 get addressGroup() { return this.candidateForm.get('address'); }

现在无论你想添加一些控件，像这样使用：

 if(this.addressGroup instanceof FormGroup){
   var ctrl:AbstractControl = this.fBuilder.control('', [Validators.required]);
   (<FormGroup>this.addressGroup).addControl('address3', ctrl);

   var emailCtrl:AbstractControl = this.fBuilder.control('', [Validators.email]);
   (<FormGroup>this.addressGroup).addControl('myEmail', emailCtrl);

   var add4:AbstractControl = this.fBuilder.control('', []);
   (<FormGroup>this.addressGroup).addControl('address4', add4);
}

这是一个老问题，但希望这会帮助别人！

原文由 Ali Adravi 发布，翻译遵循 CC BY-SA 4.0 许可协议