Angular 2 dynamic form binding won't work

Question

I'm creating a dynamic form with Angular 2 (or 4) with a form array (rooms) nesting a form array (children).

The children array won't bind controls and values in .value form property even if they are added to it.

Here the plunkr: https://embed.plnkr.co/DjtLLt0vS0qmmvgqKhN8/

What I miss?

AVJT82 · Accepted Answer · 2017-07-20 12:58:01Z

3

You have one simple error, remove the last controls from your addChild():

addChild(i: number) {
    const control = 
       //remove the last 'controls'
       this.searchform.controls.rooms).controls[i]).controls["children"].controls;
    control.push(this.initAge());
}

and instead:

addChild(i: number) {
    const control =
      this.searchform.controls.rooms).controls[i]).controls["children"];
    control.push(this.initAge());
}

Here's your forked plunker: https://plnkr.co/edit/SmnjBroGHufori1PWNSR?p=preview

edited Jul 20, 2017 at 12:58

answered Jul 20, 2017 at 12:52

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2 dynamic form binding won't work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related