为什么angular2表单在html <form>元素

Why angular2 form works incorrectly with html <form> element?

本文关键字：form 元素 angular2 html 为什么 表单      更新时间：2023-09-26

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

我已经创建了简单的普朗克的例子https://plnkr.co/edit/vdrHJBNdd26y6YhPXTHD?p=preview

现在它工作得很好。如果您输入一些值，点击"添加参数"，输入值将在模型中更新并保存到输入字段中。

但是如果你像这样用<form>元素包装你的<div> https://plnkr.co/edit/vdrHJBNdd26y6YhPXTHD?p=preview然后在一个字段中输入smth，然后再次点击"添加参数"，表单将刷新，您的值将消失(在模型中它仍然存在)。不知道为什么会这样。提前感谢您的回答。

原因是当form通过ngFor的帮助呈现all其输入时，我们显示所有字段。但问题是所有元素都有相同的name属性即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"不工作

相关文章：