Angular 6: How to bind the formArray value on save event?

Question

I have a form with array values. Values are displaying in the form is perfectly but at the time of saving the value it is not binding the whole array values; instead of it is binding only last changed value.

Also, the formControlName="id" property value is not binding into formArray object.

StackBlitz working demo.

App.component.ts

initializRecords(data?: any) {
  this.dataForm = this.formBuilder.group({
    dataCollection: this.formBuilder.group({
      id: new FormControl(),
      sizeId: new FormControl(),
      sizes: this.formBuilder.group({
        qty: new FormControl([])
      })
    })
  });
}

App.component.html

<form [formGroup]="dataForm">
  <div class="container">
    <div class="row">
      <div class="col">
        <button mat-raised-button color="primary" (click)="saveRecords()">Save</button>
      </div>
    </div>
    <div formArrayName="dataCollection">
      <div class="row" *ngFor="let element of data; let first = first">
        <div *ngIf="!first">----------</div>
        <ng-container *ngFor="let subElement of element.sizes">
          <div class="col">
            <mat-form-field class="">
              <input matInput type="text" formControlName="id" value={{element.value}} readonly>
            </mat-form-field>
            <mat-form-field class="">
              <input matInput type="text" value={{subElement.subValue}} readonly>
              <input type="hidden" formControlName="sizeId">
            </mat-form-field>
            <div formGroupName="sizes">
              <mat-form-field class="">
                <input matInput type="text" formControlName="qty"  value={{subElement.qty}}>
              </mat-form-field>
            </div>
          </div>
        </ng-container>
      </div>
    </div>
  </div>
</form>

=== Updated ===

On click of save event I would like the final JSON like this below structure as the values are displayed per row.

{
  "data": [
  { "id": 1, "sizeId": 1, "qty": 10 },
  { "id": 1, "sizeId": 2, "qty": 1 },
  { "id": 1, "sizeId": 3, "qty": 1 },
  { "id": 2, "sizeId": 1, "qty": 50 },
  { "id": 2, "sizeId": 2, "qty": 60 },
  { "id": 2, "sizeId": 3, "qty": 70 },
]}

Alexis · Accepted Answer · 2020-10-06 14:01:11Z

3

I think your usage of form is not really good.

You have 2 different types of data, one which is 'Lorium' and the other one which is 'Ipsum'. I think you should first define an array on dataCollection where you create 2 differents FormGroup.

Then in each FormGroup you will have an array with all your sub elements.

I am not sure of what you need and try to do with you program, but this way, you will have all the quantities stored as well as you want.

I share you a working example with this way of thinking. If you think I misunderstood something tell me.

Moreover, you can add any FormControl that you need on each FormGroup to fit the form with your json data.

Finally, if you want to fit you required JSON, just iterate over you elements to add them to an object.

edited Oct 6, 2020 at 14:01

answered Oct 6, 2020 at 13:04

Alexis

1,7941 gold badge18 silver badges35 bronze badges

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

3 Comments

TMA Over a year ago

Yes it is working almost similar as per my expected requirement. But at the end I need the response into same one array of object collection. I have updated the question about that sample json collection needed in the response, can you please review ?

Alexis Over a year ago

@AJT81 I have edited the stackblitz, check if it works for you :)

TMA Over a year ago

Phew !!! It seems working fine. Let me integrate into my actual project. Thank you so much for your time and efforts. Cheers !!!

Collectives™ on Stack Overflow

Angular 6: How to bind the formArray value on save event?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related