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 },
]}

Answer 1

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.