Angular 2检索文本框值

时间:2017-01-27 16:50:37

标签: angular

如何在以角度2提交时使用Id检索多个文本框的值。

例如:

<ul>
<li *ngFor="let dummydata of data;let i=index"  ><input type="text" #dummyid{{I}}/>
</ul>

<button (click)="getalltextbox()"></button>

如何在单击按钮时获取所有文本框值。

1 个答案:

答案 0 :(得分:1)

我建议你使用数组中每个对象的索引将数据放在一个具有唯一名称的表单中。

让我们说你的数组看起来像这样:

dummyDatas = [
  {
    name: 'first dummy',
    content: 'first'
  },  
  {
    name: 'second dummy',
    content: 'second'
  },  
  {
    name: 'third dummy',
    content: 'third'
  },  
]

这样的事情:

<form #myForm="ngForm" (ngSubmit)="getalltextbox(myForm.value)">
  <ul>
    <li *ngFor="let dummydata of data;let i=index">
      <input name="dummyData{{i}}" [(ngModel)]="dummydata.content"/>
    </li>
  </ul>
  <button type="submit">Click</button>
</form>

单击按钮时,您将获得对象中的所有输入值,您可以从中提取值并执行任何操作:

getalltextbox(val) {
  console.log(val);
}