CODEWITHSUNDEEP
angularangular-reactive-forms
anon
anon

Reputation: 63

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

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([]);
  }

Upvotes: 2

Views: 3383

Answers (2)

yurzui
yurzui

Reputation: 214047

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

Upvotes: 4

Sonu Kapoor
Sonu Kapoor

Reputation: 1637

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

Upvotes: 0

Related Questions