How to push FormArray without new fields than in existing fields

Question

How to push new values at the click of a button in formArray without adding new fields. Fields already exist, which means I don't need new ones, I just need new values from those fields entered.

Look at my code:

<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>

        <!-- quantity Column -->
        <ng-container matColumnDef="images" class="test" >
          <th mat-header-cell mat-sort-header *matHeaderCellDef> quantity</th>
      // i need this values but on click add new object in formArray 
          <td mat-cell *matCellDef="let element" class="test"> <input formControlName="quantity"  type="text"> </td>
        </ng-container>

        <ng-container matColumnDef="images2">
          <th mat-header-cell mat-sort-header *matHeaderCellDef> Add new </th>
          <td mat-cell *matCellDef="let element"> <button  mat-raised-button color="primary">Add new</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">
          Posalji narudzbu
        </button>
      </div>
    </div>
  </div>
</form>

Ts file:

  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;
  }


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


  addContact() {
    this.contactList.push(this.createContact());
  }

This code works well when I set fields and add function addContact(). When click show new fields and work good but in this situation, I don't want new fields. I have existing fields only to enter a quantity and push id and quantity in new FormArray. This is an example what I need: https://ibb.co/1Tj2HNc ON click button add new. If you have any question just ask The current code works on principle when I add the first product: console.log(my form.values)

data: Array(1)
0: {id: "", quantity: "99"}

And this is good only need id but ok... But when I add new quantity for new fields example 15 for another field and console.log my form values:

data: Array(1)
0: {id: "", quantity: "15 "}

override the old value and enter the new value. It should add a new object in array with that value.

Example:

data: Array(2)
0: {id: "", quantity: "99"}
1: {id: "", quantity: "15"}

Also i need id :)

EDIT:

I forgot a piece of code:

  get contactFormGroup() {
    return this.form.get('data') as FormArray;
  }

Answer 1

just create new function that accepts the index you want to insert the data into and the object you want to insert and it should do what you want.

assignContactForm(index: number, data: any): void {
  // data is object of type {id: number, quantity: number }
  this.contactFormGroup.controls[i].patchValue(data);
 }