如何从 Angular 反应表单中存在的表中获取输入字段值答案

【问题标题】：How to get the input field values from table present inside Angular reactive form如何从 Angular 反应表单中存在的表中获取输入字段值
【发布时间】：2020-05-23 04:44:17
【问题描述】：

我需要获取表格行中存在的所有输入值，并且该表格也存在于一种反应形式中。我在下面解释我的代码。

<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 反应形式中不起作用。我需要在用户提交表单时获取该表中每一行的用户输入值。

【问题讨论】：

this.productForm.value，试过了吗？
你说“我在这里使用 [(ngModel)] 但它在 Angular 反应形式中不起作用”，你为什么不使用 FormArray？注意：如果您想在反应式表单中使用 [(ngModel)]，则需要使用 [ngModelOptions]="{standalone:true}"，但在您的情况下，请使用 FormArray，使用 ngModel 来控制反应式表单内的对象数组是没有意义的跨度>

标签： arrays angular html-table angular-reactive-forms

【解决方案1】：

` ngOnInit() {
    this.survey = new FormGroup({
      surveyName: new FormControl(''),
      logoUrl: new FormControl(''),
      headerUrl: new FormControl(''),
      headerColor: new FormControl(''),
      footerUrl: new FormControl(''),
      footerColor: new FormControl(''),
      sections: new FormArray([
        this.initSection(),
      ]),
    });
  }

  initSection() {
    return new FormGroup({
      sectionTitle: new FormControl(''),
      sectionDescription: new FormControl(''),
      questions: new FormArray([
        this.initQuestion()
        ])
    });
  }
  initQuestion() {
    return new FormGroup({
      questionTitle: new FormControl(''),
      questionType: new FormControl('',Validators.required),
      options: new FormArray([
        this.initOptions()
      ])
    });
  }

  initOptions() {
    return new FormGroup({
      optionTitle: new FormControl('')
    });
  }

  addSection() {
    const control = <FormArray>this.survey.get('sections');
    control.push(this.initSection());
  }`

https://stackblitz.com/edit/deep-nested-reactive-form

【讨论】：