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

时间:2018-03-15 06:45:11

标签: javascript angular2-forms

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中删除它们?

3 个答案:

答案 0 :(得分:8)

首先,您必须从主FormGroup获取子FormGroup,然后您可以在文档中使用addControl和removeControl refrenced:https://angular.io/api/forms/FormGroup

所以在你的情况下,它将是:

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

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

答案 1 :(得分:2)

这对我有用:

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

答案 2 :(得分:1)

我尝试过Adhikari回答,但无法为我工作,它总是会引发错误:

def create(name: String, price: Double): Future[Int] = db.run {
    (items returning items.map(_.id)) += Item(0, name, price)
}

他的回答帮助我思考,最后我想到了:

在这样的任何地方写一个getter属性(以获取组):

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

现在,无论您想在哪里添加一些控件,都可以像这样使用:

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

这是一个古老的问题,但是希望这会对某人有所帮助!