Question

我在本文后面创建了一个Angular表单（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">

OR

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

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

Answer 1

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

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

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

DEMO：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相互干扰。

修改我的坏，当然你也必须删除花括号。

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

3 个答案: