Angular 2 使用 ngFor 输入的模板驱动表单

Question

是否可以在模板驱动的表单中使用 ngFor 创建输入字段，并使用类似 #name="ngModel" 的东西以便能够在另一个标签中使用 name.valid？

现在我们在 table 中有一个带有数量字段和添加到购物车按钮的动态产品列表。我想把整个事情做成一个表单，最后有一个添加所有按钮，如下所示：

<form #form="ngForm">
    <div *ngFor="item in items">
        <input name="product-{{item.id}}"
               [(ngModel)]="item.qty"
               #????="ngModel"
               validateQuantity>
        <button (click)="addItemToCart(item)"
                [disabled]="!????.valid">Add to cart</button>
    </div>
    <button (click)="addAll()"
            [disabled]="!form.valid">Add all</button>
</form>

但是我如何为 ngModel 每行生成一个新的变量名？

Answer 1

这个不用了，照着做就好了：

<form #form="ngForm">
    <div *ngFor="item in items">
        <input name="product-{{item.id}}"
               [(ngModel)]="item.qty"
               validateQuantity
               #qtyInput>
        <button (click)="addItemToCart(item)"
                [disabled]="!qtyInput.valid">Add to cart</button>
    </div>
    <button (click)="addAll()"
            [disabled]="!form.valid">Add all</button>
</form>

这里是 Angular 的部分。 :)

Answer 2

您需要将 FormModule 添加到您的 app.module.ts 才能使 2-way-binding 正常工作，至少在较新版本的 angular

中是这样

Answer 3

mxii 答案对于 ngFor 动态创建的表单项按预期工作，但如果您不打算使用 ngForm，并且您'迭代具有独立实体的项目列表（如评论列表，用户应该能够回复每条评论）你可以使用 template reference variables 这让你能够获得和使用轻松输入元素。

以下是您的操作方法：

// Your template
<div *ngFor="item in items">
  <!-- Your input -->
  <input #itemInput type="number">

  <button (click)="addItemToCart(itemInput.value)"
          [disabled]="!itemInput.value">Add to cart</button>
</div>

它给出了分配给输入字段的变量的引用，在上面的示例中我们传递了 itemInput.value，这将是输入字段的值；在某些情况下，您可能需要对输入字段的引用（假设您要在获取数据时删除它的值），您可以只传递 itemInput 并且它是 [=15 的一种类型=] 并访问其数据。

Angular 2 使用 ngFor 输入的模板驱动表单

Angular 2 template driven form with ngFor inputs

forms

angular

ngfor