Как получить значения поля ввода из таблицы, представленной внутри Angular реактивной формы - PullRequest
Новая
       8

Как получить значения поля ввода из таблицы, представленной внутри Angular реактивной формы

0 голосов
/ 07 февраля 2020

Мне нужно получить все входные значения, которые присутствуют внутри строк таблицы, и эта таблица также присутствует внутри одной реактивной формы. Я объясняю мой код ниже. 

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

Мой машинописный код приведен ниже. 

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

Здесь я готовлю массив для таблицы. В этой таблице у меня есть несколько полей ввода, мне нужно, когда thr foem отправит, я должен получить эти входные значения для каждой строки в том же массиве. Я использую [(ngModel)] здесь, но он не работает внутри Angular реактивной формы. Мне нужно получить эти пользовательские входные значения каждой строки в этой таблице, пока пользователь будет отправлять форму.

...