Angular 2 formowane przez szablony z wejściami ngFor

Question

Czy można utworzyć pola wejściowe z ngFor w formularzu opartym na szablonie i użyć czegoś takiego jak # name = "ngModel", aby móc używać nazwy. Invalid w innym tagu?

W tej chwili mamy dynamiczną listę produktów z polem ilościowym i przyciskiem Dodaj do koszyka w tabeli. Chcę, aby całość formularz z przycisku Dodaj wszystko w końcu jak to:

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

Ale jak mogę wygenerować nową nazwę zmiennej za rzędzie dla ngModel?

Answer 1

Nie ma potrzeby do tego, po prostu zrób to tak: część

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

położenia kątowego tutaj. :)