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?
The ngForm directive will convert it to the Template-driven form and create the top-level FormGroup control. Next, we use the ngModel directive to create the FormControl instance for each of the HTML form elements. Later, we will learn how to submit the form data to the component class.
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. :)
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With