为什么angular2表单与html的工作不正确 <form> 元件？

Question

我注意到ng2中的<form>元素有一些奇怪的行为，我需要有人来解释一下:)

我创建了简单的Plunker示例https://plnkr.co/edit/vdrHJBNdd26y6YhPXTHD?p=preview

所以现在它工作正常。 如果输入一些值并单击“添加参数”，输入值将在模型中更新并保存到输入字段中。

但是，如果你用<form>元素包装你的<div> ，如https://plnkr.co/edit/vdrHJBNdd26y6YhPXTHD?p=preview并输入smth到一个字段并再次点击“添加参数”，表格将被刷新，你的值将消失（在模型中它仍然存在）。 无法弄清楚它为什么会发生。 提前感谢您的回答。

Answer 1

原因是当form通过ngFor帮助呈现all输入时，我们显示所有字段。 但问题是我们对所有元素都有相同的名称属性，即name="name" ＆ name="test" 。 因此，当新的输入添加了name值'' ＆ type this.types[0] （ String ）时，它为所有表单元素应用相同的值。

<form #form="ngForm">
    <div *ngFor="let param of paramsList; let i=index">
      <input type="text" [(ngModel)]="param.name" name="{{'name'+i}}">
      <select [(ngModel)]="param.type" name="{{'type'+i}}">
          <option *ngFor="let type of types" [ngValue]="type">{{type}}</option>
      </select>
    </div>
</form>

演示Plunkr

注意：不知何故[attr.name]="'name'+i"无效。