Question

在我的角度应用程序中，我有3个输入说 - 代码，名称和价格，在表格的末尾添加更多按钮，当点击添加更多按钮时，应该有一个重复的行。所有这一切都运行正常，但我需要获取此动态框值的值。

下面是代码表：

   <form class="form-horizontal" (ngSubmit)="Data(addForm)" [formGroup]="addForm">
   <tr *ngFor="let field of fieldArray; let i = index">
   <td><input type="text"formControlName="codeTxt"></td>
   <td><input type="text"formControlName="nameTxt"></td>
   <td><input type="text"formControlName="priceTxt"></td>
   <td><button (click)="deleteFieldValue(i)">Delete</button></td>
    <tr>

<tr>
   <td><input type="text"formControlName="codeTxt"></td>
   <td><input type="text"formControlName="nameTxt"></td>
   <td><input type="text"formControlName="priceTxt"></td>
   <td><button (click)="addFieldValue()">Add</button></td>
<tr>
</form>

我需要以总价格

获取所有动态添加的行的值

Answer 1

您可以使用NgModel和模板变量绑定输入元素的值（请参阅官方文档中的Two-way data binding with ngModel ）。在您的组件中，公开'code'，'name'和'price'并将它们绑定到模板中的输入元素。如果要添加动态行，请迭代代码集，名称和价格对象，并使用NgFor呈现表行。

Answer 2

使用角度绑定可能有更好的解决方案，但下面是基于javascript和html的“快速”解决方案。

我为你的输入元素添加了一个name属性，并修改了你的addFieldValue函数。

function addFieldValue(el){
  /**
  YOUR PREVIOUS CODE 
  **/
  
  // container of the data you want, you can add it to a list for example
  elementToAdd = {codeTxt: null, nameTxt: null, priceTxt: null };
  // get parent tr element
  let tr = el.parentNode.parentNode;
  
  // get information from inputs
  for(let input of tr.getElementsByTagName('input')){
      elementToAdd[input.name] = input.value;
  }
  console.log(elementToAdd); // you should have all the data here
}

<tr>
       <td><input type="text" formControlName="codeTxt" name="codeTxt"></td>
       <td><input type="text" formControlName="nameTxt" name="nameTxt"></td>
       <td><input type="text" formControlName="priceTxt" name="priceTxt"></td>
       <td><button (click)="addFieldValue(this)">Add</button></td>
    <tr>

在Angular中，

侧注：，您必须处理一些安全问题。使用ElementRef方法可能更干净。有关详细信息：How to get dom element in angular 2

Angular 5：如何通过动态添加和删除表中的行来获取值

2 个答案: