为什么 angular2 表单无法与 html <form> 元素一起使用？答案

【问题标题】：Why angular2 form works incorrectly with html <form> element?为什么 angular2 表单无法与 html <form> 元素一起使用？
【发布时间】：2017-03-28 08:45:53
【问题描述】：

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

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

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

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

【问题讨论】：

我不知道表单提交的原因，但我不确定您是否可以按照您的方式构建动态表单。例如，在您的 Plunker 中，您的所有输入和选择字段都具有相同的“名称”属性，这似乎不正确。你看过angular.io/docs/ts/latest/cookbook/dynamic-form.html吗？
@AngularFrance 是的，也许你是对的，但我做得不好。但我想尝试使用 ngModel 和两个数据绑定的模板驱动方法。
@AngularFrance 问题在于name 属性重复多次，因此新添加的值将所有先前添加的字段替换为默认值。

标签： javascript html angularjs forms angular

【解决方案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>

Demo Plunkr

注意：不知何故，[attr.name]="'name'+i" 不起作用。

【讨论】：

@ilyablbnv formGroup(model-driven-form) 会是解决这种情况的更好方法.. 虽然很高兴为您提供帮助，谢谢 ;)