Using Angular 5 Form Group and Array to update data

Question

I am using Angular FormGroup and FormArray to allow a user to add a new instance of a FormGroup and to edit current Forms. I am having trouble figuring out how to update the data. See here..https://stackblitz.com/edit/form-array-patch-jfb9f8?file=app/app.component.html

I am able to append a new instance of the form on click of the "Add" button, but how should the updateBins() function work when saving the data (either in a new form or added form). Struggling with how to link the two together.

Haifeng Zhang · Accepted Answer · 2018-02-22 18:45:06Z

1

You're almost there, just need some changes:

1) push FormGroup to FormArray

this.binsFormArray.controls.push(this.createBin(newBin));

should be

this.binsFormArray.push(this.createBin(newBin));

2) Display form value

<pre>{{ bins | json }}</pre>

should be

<pre>{{ binsForm.value | json }}</pre>

edited Feb 22, 2018 at 18:45

answered Feb 22, 2018 at 18:22

Haifeng Zhang

32.1k21 gold badges95 silver badges133 bronze badges

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

2 Comments

JordanBarber Over a year ago

Thanks haifzhan, that is very helpful but how do I also use a separate function (click on the update button) to store the new FormArrays to my bin Array?

Haifeng Zhang Over a year ago

to update your bins Array, you can get last FormGroup from FormArray and use formGroupItem.get('id').value to access the id control, but I don't think you need update your local bins array. you can access it via binsForm.value

Collectives™ on Stack Overflow

Using Angular 5 Form Group and Array to update data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related