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

【问题标题】：How to add/remove FormControl from a nested FormGroup如何从嵌套的 FormGroup 添加/删除 FormControl
【发布时间】：2018-08-23 21:19:42
【问题描述】：

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 中删除？

【问题讨论】：

标签： javascript angular2-forms

【解决方案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');

【讨论】：

调用removeControl时没有第二个参数。
@PigBoT 很好，由 Abdulla Nilam 在修订版中添加，不知道为什么，也许它是特定版本的 Angular 所必需的。无论哪种方式，我已将其恢复为原始答案:)
Erex，他可能只是有些困惑。我扫描了文档版本，除了 Dart，只看到了一个论点。答案现在对我来说很好。谢谢。

【解决方案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);
}

这是一个老问题，但希望这会对某人有所帮助！

【讨论】：

'removeControl' 也一样：(this.addressGroup).removeControl('address4', add4);

【解决方案3】：

这对我有用：

(this.candidateForm.get('address') as FormGroup).addControl('address3', this.formBuilder.control(null));
(this.candidateForm.get('address') as FormGroup).removeControl('address3');

【讨论】：