Get data of editable mattable using formarray

Question

I have created an editable mattable using this link. Now i am trying to fetch the data that the user will write inside the cells in a formArrray but I am not sure how i can proceed. I have seem some examples but they all demand that the table must also be initiated by a FormArray data but in my case I have only headers and the data to show in first column and that data is also dynamic that i have to create myself according to my requirements. Now how can i get all the input data inside an array of object in such a way the each object must also have the header proeprty and the first column row property in front of which the user has made a the change including that change. Something like this

[
  {
    "header":"Punjab",
    "initialRow": "Sindh"
    "enteredValue": 200
  }
]

Here is my html code

<div class="pageContiner"  *ngIf="dataSource">
    <mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  
        <ng-container matColumnDef=" ">
          <mat-header-cell *matHeaderCellDef></mat-header-cell>
          <mat-cell *matCellDef="let row; let rIndex = index;">
  
              <a class="header-value"> {{header}} </a>
              <!--Input tag the only show up when editpointer col and row equal to the location of the cell-->
  
              <!-- <button mat-icon-button (click)="deleteRow(rIndex)">
                <mat-icon>delete</mat-icon>
              </button>
              <button mat-icon-button (click)="addRow(rIndex)">
                <mat-icon>add</mat-icon>
              </button> -->
            {{displayedColumns[rIndex + 1]}}
          </mat-cell>
        </ng-container>
  
        <ng-container *ngFor="let header of displayedColumns  | slice:1:displayedColumns.length; index as cindex" 
        [cdkColumnDef]="header">
          <mat-header-cell *matHeaderCellDef>
            
            <a class="header-value"> {{header}} </a>
            
            <!-- <button mat-icon-button (click)="deleteColumn(cindex)">
              <mat-icon>delete</mat-icon>
            </button>
            <button mat-icon-button (click)="addColumn(cindex)">
              <mat-icon>add</mat-icon>
            </button> -->
  
          </mat-header-cell>
  
          <!-- when switch function is called then the value of editpointer and trucker will change accordingly
          ngClass will change the color of the background of the edited cell-->
          <mat-cell *cdkCellDef="let element; index as rindex" (click)="switchToInput(rindex, cindex)"
          [ngClass]="{'activeCell': editor.editPointer.col === cindex && editor.editPointer.row === rindex}">
               <!-- input and ngIf directer to switch between to editing mode 
               if editpointer col and row equal to cindex and rindex than switch to input-->
              <a  *ngIf="editor.editPointer.col != cindex || editor.editPointer.row != rindex" class="cell-value"> {{element[cindex]}} </a>
              <!-- <input matInput *ngIf="editor.editPointer.col === cindex && editor.editPointer.row === rindex" [(ngModel)]="element[cindex]" #value="ngModel" name="value"> -->
              <ng-container formArrayName="refsTitulaireQuotas">
                <td *ngFor="let g of genreDiplomatiqueQuotas; let j = index;" [formGroupName]="j">
                  <input type="number" min="0" formControlName="valeur" class="form-control"
                    value="{{quotas?.refsListQuotas[i]?.refsTitulaireQuotas[j]?.valeur? quotas.refsListQuotas[i].refsTitulaireQuotas[j].valeur:null}}"/>
                </td>
               
          </mat-cell>
        </ng-container>
  
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
  </div>

  <div fxLayout="row" fxLayoutAlign="end end">
      <button mat-raised-button color="primary" style="background-color: rebeccapurple; float: right; margin-top: 20px;">Save</button>
  </div>

Here is my component.ts code

export class SpreadsheetEditableComponent implements OnChanges {

  @Input() regions: IRegion[];
  @Input() serviceTypes: IServiceType[];
  @Input() weightSlabs: IWeightSlab[];
  @Input() volumeSlabs: IVolumeSlab[];
  displayedColumns: string[];
  newDisplayedColumns: string[];
  dataSource: MatTableDataSource<any>;
  testForm: FormGroup;
  editor = {
    //use to change the switch to input
    editPointer: {
      col: -1,
      row: -1,
    },
  };

  constructor(
    private combinationService: CombinationService,
    private fb: FormBuilder
  ) {
    this.testForm = this.fb.group({
      properties: this.fb.array([])
    });
   }

  ngOnChanges() {
    if(this.regions) {
      let header = [];
      for(let i = 0; i < this.regions.length; i++) {
        for(let j = 0; j < 1; j++) {
          header.push(['        ', '        ', '        ', '       ']);
        }
      }
      let displayedColumnData = this.regions.map((data) => {
        return data.name;
      })
      let newElement = ' ';
      this.displayedColumns = [newElement].concat(displayedColumnData);
      console.log(this.displayedColumns);
      this.dataSource = new MatTableDataSource(header);
    }
  }

  addFormField() {
    <FormArray>this.testForm.get('properties') as FormArray;
  }

  switchToInput(rindex, cindex) {
    this.editor.editPointer.col = cindex;
    this.editor.editPointer.row = rindex;
  }
}

Page is showing like this