Push FormArray into fromgroup in Angular Material table

问题

I have a table and predefined things. At the click of an add button, I want to add a new json product to my 'data' array. Json single product have id and quantity.

Look my template with table:

<form [formGroup]="form" (submit)="submit()">
  <div *ngFor="let data of contactFormGroup.controls; let i = index;" formArrayName="data">
    <div [formGroupName]="i">


      <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Pretraži prozivod...">
      </mat-form-field>

      <table mat-table [dataSource]="productSource" matSort class="mat-elevation-z8">

        <!-- Position Column -->
        <ng-container matColumnDef="id">
          <th mat-header-cell mat-sort-header *matHeaderCellDef> Broj Proizvoda </th>
          <td mat-cell *matCellDef="let element"> {{ element.id }} </td>
        </ng-container>


        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <th mat-header-cell mat-sort-header *matHeaderCellDef> Naziv proizvoda </th>
          <td mat-cell *matCellDef="let element"> {{ element.name }} </td>

        </ng-container>

        <!-- Weight Column -->
        <ng-container matColumnDef="description">
          <th mat-header-cell mat-sort-header *matHeaderCellDef> Opis proizvoda </th>
          <td mat-cell *matCellDef="let element"> {{element.description}} </td>
        </ng-container>

        <!-- QuantityColumn -->
          //this is quantity which which is parameter in my json product
        <ng-container matColumnDef="images" class="test">
          <th mat-header-cell mat-sort-header *matHeaderCellDef> Kolicina </th>
          <td mat-cell *matCellDef="let element" class="test"> <input formControlName="quantity" type="text"> </td>
        </ng-container>

//here on click add i want to add new product json with id and quantity in data array
        <ng-container matColumnDef="images2">
          <th mat-header-cell mat-sort-header *matHeaderCellDef> Add </th>
          <td mat-cell *matCellDef="let element"> <button (click)="addContact()" mat-raised-button color="primary">Add </button>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr (click)="test(row.id)" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

      </table>
      <mat-paginator [pageSizeOptions]="[5,10,20]" showFirstLastButtons></mat-paginator>

      <div class="button-submit">
        <button (click)="openDialog2()" mat-raised-button color="warn">
          Send Order
        </button>
      </div>
    </div>
  </div>

This is my ts file:

First form:

  ngOnInit() {
    this.productSource.sort = this.sort;
    this.productSource.paginator = this.paginator;
    this.getProducts();
    this.form = this.fb.group({
      deliveryDate: [''],
      data: this.fb.array([this.createContact()]),
      note: [null]
    });

    this.contactList = this.form.get('data') as FormArray;
  }


  getContactsFormGroup(index): FormGroup {
    // this.contactList = this.form.get('contacts') as FormArray;
    const formGroup = this.contactList.controls[index] as FormGroup;
    return formGroup;
  }
  addContact() {
    this.contactList.push(this.createContact());
  }


  createContact(): FormGroup {
    return this.fb.group({
      id: ['', Validators.required],
      quantity: ['', Validators.required]
    });
  }

The current problem is that it only records the last product I entered. This is example how i want: https://ibb.co/1Tj2HNc On click add in my language "Dodaj" I want to add new product in FormArray. IF I add quantity for first product example 5 And add quantity for second product 10 my data array(FormArray) is filled with last entered product. I want on click add or on my language "Dodaj" add new json.

来源：https://stackoverflow.com/questions/59329970/push-formarray-into-fromgroup-in-angular-material-table