以模板驱动的 Angular 形式传递 ID

Question

我在这篇文章 (http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/) 之后创建了一个 Angular 表单：

<div *ngFor="let data of somevar.records">
  <form #abc_form="ngForm" (ngSubmit)="onSubmit(abc_form.value)">
    {{data.id}}    // prints 5
    <input name="id" type="hidden" value={{data.id}} ngModel>
    <input type="radio" name="name" value={{data.id}} ngModel>

    <div class="submit-button">
      <button type="submit">Save</button>
    </div>
  </form>
</div>

组件中的 data 哈希看起来像：

somevar = {records: [{id: 5}, {id: 6}]}

在这里，当我在视图中直接插入 data.id 时，它会在 UI 中打印 5。但是，当我尝试将其作为值分配给隐藏的输入字段时，它不存在。因此，在提交表单时，ID 参数不存在。

这里有什么问题？那么传递ID的正确方法是什么？

编辑

我也试过了：

<input name="id" type="hidden" [value]="data.id" ngModel>

注意当我删除 ngModel 时，该值被分配给隐藏字段：

<input name="id" type="hidden" [value]="data.id">

或

<input name="id" type="hidden" value={{data.id}}>

上述两种方法都有效并创建了分配了值的隐藏输入。但是，它不再是 ngModel 的一部分了

Answer 1

您可以使用[ngModel]来绑定值，而不是使用ngModel和value：

<input type="hidden" name="id" [ngModel]="data.id">

现在它将成为您表单的一部分。

演示：http://plnkr.co/edit/oF5lFSbMbyltB0Mgi6hi?p=preview

Answer 2

在 ngFor 循环中创建多个 ngModel 控件时，每个控件和名称必须是唯一的

你可以试试这个：

<div *ngFor="let data of somevar.records;let index = index;trackBy:trackByIndex;">
  <form #abc_form="ngForm" (ngSubmit)="onSubmit(abc_form.value)">
    {{data.id}}    // prints 5
    <input name="id_{{index}}" type="hidden" [ngModel]=data[index].id>

    <div class="submit-button">
      <button type="submit">Save</button>
    </div>
  </form>
</div>

Answer 3

要使用数据绑定，您需要将隐藏输入更改为：

<input name="id" type="hidden" [value]=data.id>

删除ngModel，因为通过[value] 和ngModel 的数据绑定可能会相互干扰。

编辑 我的错，当然你也必须去掉花括号。