模板驱动角形传递ID

Question

我在本文(http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/)之后创建了一个角形式：

<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>

组件中的数据散列如下所示：

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和value不同，您可以使用[ngModel]绑定值：

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

现在它将成为你形态的一部分。

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

Answer 2

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

你可以试试这个：

​

<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进行数据绑定可能会相互干扰。

编辑我的坏，当然你也必须移除花括号。