Angular 2 template driven form with ngFor inputs

Question

Is it possible to create input fields with a ngFor in a template driven form and use something like #name="ngModel" to be able to use name.valid in another tag?

Right now we have a dynamic list of products with a quantity field and a add to cart button in a table. I want to make the whole thing a form with a add all button at the end like this:

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

But how can i generate a new variable name per row for the ngModel?

Mickens

Possible duplicate of Angular 2+ and Observables: Can't bind to 'ngModel' since it isn't a known property of 'select' – Grapnel

@Grapnel It's definitively a similar question but on different parts, I didn't know the syntax to make my template work while that question had the correct syntax but was missing a module. – Mickens

Answer 1

There's no need for this, just do it like this:

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

Its Angular's part here. :)

Whyte

Wait what? I tried this and it didnt work but suddenly it does, must have made some typo or other mistake.. Thanks anyhow! – Mickens

I get error : If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions. when I use name={{item.name}}. but when i add string first of attr, it works!!! >> name="someTxt{{item.name}}" !!!! but i need name equal with item.name value. can you help me?? – Jaquenette

Answer 2

The mxii answer works as expected for form items dynamically created by ngFor, but if you're not going to use ngForm, and you're iterating over a list of items that have an independent entity (like a list of comments, and the user should be able to reply each comment) you can use template reference variables which give you the ability to get and work with the Input element easily.

Here is how you can do it:

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

It gives a reference to the variable assigned to the input field, and here in the example above we passed itemInput.value which will be the value of the input field; There might be cases that you need a reference to the input field (let's say you're going to remove its value when you got the data), you can just pass the itemInput and which is a type of HTMLInputElement and access its data.

Suffering

Answer 3

you need to add FormModule to your app.module.ts to get 2-way-binding working, at least in newer versions of angular

Angular 4 - "Can't bind to 'ngModel' since it isn't a known property of 'input' " error

Dufrene