I am seeking a way to collect all input values found within the table rows inside a reactive form. Below is an explanation of my code.

<form [formGroup]="productForm" (ngSubmit)="saveProduct($event)" novalidate>
<mat-form-field appearance="outline">
   <mat-label>Product Name</mat-label>
   <input matInput placeholder="Product Name" aria-label="Product Name" formControlName="ProductName" maxlength="70" required>
</mat-form-field>
<div class="section" *ngIf="productForm.get('ProductType').value == 'C' && isConfigSection==1">
   <div class="help-content">
      <h5>Configurables</h5>
   </div>
   <div class="form-content">
      <div class='col-sm-12' style="max-width: 100%;">
         <div id="table-scroll" class="table-scroll">
            <div class="table-wrap">
               <table class="main-table">
                  <tbody *ngIf="ColumnNames.length > 1">
                     <tr *ngFor="let opt of ConfigArr; let i = index;">
                        <td class="sticky-col first-col">
                           {{opt.attrName1}}({{opt.attr1}})
                        </td>
                        <td class="sticky-col second-col">
                           {{opt.attrName2}}({{opt.attr2}})
                        </td>
                        <td>
                           <input class="form-control" matInput placeholder="Add MRP" aria-label="MRP" [(ngModel)]="opt.MRP">
                        </td>
                        <td>
                           <input class="form-control" matInput placeholder="Add BaseUnitPrice" aria-label="BaseUnitPrice" [(ngModel)]="opt.BaseUnitPrice">
                        </td>
                        <td>
                           <input class="form-control" matInput placeholder="Add DiscountValue" aria-label="DiscountValue" [(ngModel)]="opt.DiscountValue">
                        </td>
                        <td>
                           <input class="form-control" class="form-control" matInput placeholder="MinBuyQty" aria-label="MinBuyQty" [(ngModel)]="opt.MinBuyQty">
                        </td>
                        <td>
                           <input class="form-control" matInput placeholder="Add MinimumPrice" aria-label="MinimumPrice" [(ngModel)]="opt.MinimumPrice">
                        </td>
                        <td>
                           <input class="form-control" matInput placeholder="Add TaxPercentage" aria-label="TaxPercentage" [(ngModel)]="opt.TaxPercentage">
                        </td>
                        <td>
                           <input class="form-control" matInput placeholder="Add TaxAmount" aria-label="TaxAmount" [(ngModel)]="opt.TaxAmount">
                        </td>
                        <td>
                           <input class="form-control" matInput placeholder="Add DiscountPrice" aria-label="DiscountPrice" [(ngModel)]="opt.DiscountPrice">
                        </td>
                        <td>
                           <input class="form-control" matInput placeholder="Add MaxBuyQty" aria-label="MaxBuyQty" [(ngModel)]="opt.MaxBuyQty">
                        </td>
                        <td>
                           <input class="form-control" matInput placeholder="Add MaximumPrice" aria-label="MaximumPrice" [(ngModel)]="opt.MaximumPrice">
                        </td>
                        <td>
                           <button class="btn btn-md btn-primary" type="button" (click)="addImage($event, AddImages,i)">
                           Add Image<i class="fa fa-plus"></i>
                           </button>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </div>
      </div>
   </div>
</div>
</form>

Below is my TypeScript code:

for(let i=0; i< res['data']['Attributes'][this.ColumnNames[0]].length;i++){
   for(let j=0;j< res['data']['Attributes'][this.ColumnNames[1]].length;j++){
       let data = {
                  'attr1':res['data']['Attributes'][this.ColumnNames[0]][i],
                  'attrName1':attrName1,
                  'attr2': res['data']['Attributes'][this.ColumnNames[1]][j],
                  'attrName2': attrName2,
                  "MRP": '',
                  "BaseUnitPrice":'',
                  "DiscountValue": '',
                  "MinBuyQty":'',
                  "MinimumPrice":'',
                  "TaxPercentage":'',
                  "TaxAmount":'',
                  "DiscountPrice":'',
                  "MaxBuyQty":'',
                  "MaximumPrice":''
                }
                this.ConfigArr.push(data);
   }

I am in the process of preparing an array for the table. Within this table are input fields. Upon form submission, I would like to retrieve the input values for each row within that same array. Although I am using [(ngModel)], it does not seem to work within the Angular reactive form. My goal is to capture user input values for each row in the table upon submission of the form.