没有使用 Angular 获取表中存在的输入值答案

【问题标题】：Not getting the input values present inside the table using Angular没有使用 Angular 获取表中存在的输入值
【发布时间】：2020-02-06 06:33:40
【问题描述】：

我在表格单元格中有一些输入字段，但我无法使用 Angular 8 获取这些值。我的代码如下所示。

<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" [value]="opt.MRP">
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add BaseUnitPrice" aria-label="BaseUnitPrice" [value]="opt.BaseUnitPrice">
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add DiscountValue" aria-label="DiscountValue" [value]="opt.DiscountValue">
   </td>
   <td>
      <input class="form-control" class="form-control" matInput placeholder="MinBuyQty" aria-label="MinBuyQty" [value]="opt.MinBuyQty">
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add MinimumPrice" aria-label="MinimumPrice" [value]="opt.MinimumPrice">
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add TaxPercentage" aria-label="TaxPercentage" [value]="opt.TaxPercentage">
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add TaxAmount" aria-label="TaxAmount" [value]="opt.TaxAmount">
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add DiscountPrice" aria-label="DiscountPrice" [value]="opt.DiscountPrice">
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add MaxBuyQty" aria-label="MaxBuyQty" [value]="opt.MaxBuyQty">
   </td>
   <td>
      <input class="form-control" matInput placeholder="Add MaximumPrice" aria-label="MaximumPrice" [value]="opt.MaximumPrice">
   </td>
</tr>

<button class="btn btn-md btn-primary" type="button" (click)="addImage($event, AddImages,i)">
   Add <i class="fa fa-plus"></i>
</button>

Typescript 代码如下。

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

addImage(event: Event, template: any, index: any) {
     console.log('all values', this.ConfigArr);
}

当用户单击Add 按钮时，在输入字段中输入值后，我没有得到控制台内每一行的输入字段值。我需要在用户输入输入值之后它应该在每一行的this.ConfigArr 内。

【问题讨论】：

你能分享表单代码吗？请以完整形式分享输入字段代码

标签： angular typescript html-table

【解决方案1】：

您不需要明确地捕获它。这就是为什么 Angular 有 ngModel。

<input [(ngModel)]="opt.BaseUnitPrice" class="form-control" matInput placeholder="Add BaseUnitPrice" aria-label="BaseUnitPrice" >

所以这将直接更新ConfigArr。

【讨论】：

我使用的是响应式表单，所以无法将 [(ngModel)] 放入其中。
嗯..您应该在问题本身中指定这一点。无论如何，这会更简单。表单值将在formName.value 对象中可用。看看这个例子：stackblitz.com/edit/angular-reactive-forms-x6pelx?file=app/…
我还输入了表单控件名称，但仍然无法获取数据。
如果一切正常，它应该可以工作。您的代码中似乎还有其他问题？你能用最少的代码创建一个堆栈闪电战来重现你的问题吗？

【解决方案2】：

请使用以下输入字段当您在输入框中输入值时，它将更新为 opt 对象。

<div class="input-field">
 <label class="input-label">
 <input [(ngModel)]="opt.entityname" class="form-input" mdbInput placeholder="Enter the 
 input">
 </label>
</div>

【讨论】：

我使用的是响应式表单，所以无法将[(ngModel)] 放入其中。

【解决方案3】：

您好，请检查以下内容。

HTML

<div class="form-group">
     <label>First Name</label>
     <input type="text" formControlName="firstName" class="formcontrol"/>
</div>

tile.ts

registerForm: FormGroup;
this.registerForm = this.fb.group({
 firstName: ['', Validators.required],
)};

请使用以下页面 Reactive form angular

【讨论】：