How to bind following HTML markup using Angular 6 reactive form binding?

0
votes

I am working on Angular form, please find this working example.

I need to bind this form to form group and form array and get out the model and send db for saving the changes. I am getting issue, when same data type come more than one time, dropdown box changes affect to both controls.

1
angularangular-reactive-formsreactive-formsformarrayformgroups
Is your main issue with generating new controls via a Form Array? You are not implementing this correctly, which is why I am asking. – jburtondev
Please find the updated version, ( stackblitz.com/edit/angular-9zezpt?file=app/app.component.ts) – cpranathunga
My main issue is how do i bind these controls with formArray and get the json object out. – cpranathunga
Apologies for the delay, busy day yesterday. Added an answer. Follow this and it will fix your issue. – jburtondev

1 Answers

0
votes

It appears that you have not implemented the FormArray correctly, as a result you will need to implement this correctly first.

By this, I mean that you have imported the FormArray class in your component, but are not using it as a control in your FormGroup with controls within the array (I assume you would like to push/pop elements on this FormArray), which is it's normal use case.

I have written an article recently on how to do this, but there is also the Angular documentation if you are having any further issues. So in this order, you will need to do the following:

  1. Implement the FormArray and FormGroup into your form;
  2. If you require two-way data binding, then use [(ngModel)] as well as the Reactive Form binding that comes out of the box.
  3. In terms of your issues getting the json object out, this is a simple one; use {{ yourForm.value | json }} in your template, which will show your form piped into a json data structure. If there is any issue with the data, you can easily see this here as a debugging method.

  4. The FormControl, FormGroup and FormArray will output a clean and valid object, when implemented.

  5. Send your json data to the DB.