带ngFor输入的角2模板驱动表单

Question

是否可以在模板驱动的表单中使用ngFor创建输入字段，并使用类似#name=“ngmodel”的东西来在另一个标记中使用name.valid？

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

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

它的角部分在这里。：）