Angular dynamically created nested reactive form - How to get child form values to update parent form value?

Question

See my plnkr: http://plnkr.co/edit/OSMtkjWGsDUz1wENtRDR?p=preview

I've got 3 components:

1) App: The base form. This holds references to "mini forms" i.e. subcontrols in the code

2) AppChild: These represent a single "mini form"

3) AppOption: These are a single input control in AppChild

You can click "Add Control" to add a new AppChild, and click "Click to add a new option +" to add an AppOption to an AppChild.

As you can see on my plnkr - each individual mini form (Sub control) has the correct form value printed out.

And the base form - can recognise the correct # of mini forms.

But how do I get it so the mini form values are contained in the base form values - instead of an empty array []?

I've added a comment on the plunkr where I think the issue is but I'm not sure if this is the reason/or how to fix it Line 49

initControl() {
return this.fb.array([]);
  }

yurzui · Accepted Answer · 2017-12-19 16:25:48Z

4

You can create FormGroup instead of FormArray.

app.component.ts

initControl() {
  return this.fb.group({});
}

and then manipulate this group in your app-sub-form component

app-sub-form.component.ts

ngOnInit() {
  // We've already had FormGroup, so we can add control to it
  this.subForm.addControl('subOptions', this.fb.array([]));
  this.addOptions();
}

Plunker Example

answered Dec 19, 2017 at 16:25

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

Comments

Sonu Kapoor · Accepted Answer · 2017-12-19 15:25:36Z

0

Not really a full solution, but start looking at this example. It may give you some ideas.

https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

answered Dec 19, 2017 at 15:25

Sonu Kapoor

1,6474 gold badges18 silver badges35 bronze badges

Collectives™ on Stack Overflow

Angular dynamically created nested reactive form - How to get child form values to update parent form value?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related