Angular is updating all fields simultaneously when it should just upda

I have a *ngFor and I'm trying to update a number field on click but it updates all of the items with same value.

In my html:

<form *ngFor="let product of products" [formGroup]="myForm" name="myForm" (ngSubmit)="onSubmit([product.name], [product.price], int)">
<div id="cartItemsList">
<ul>
<li>
<div name="product_name">{{product.name }}div>
<div><img src="../assets/images/gallery/{{product.thumbnail}}" />div>
<div>{{product.price }}div>
<button class="minus-btn" (click)="minus()" type="button" name="btn">
<img src="../assets/images/minus.svg" alt="minus" />button>
<input pattern="^(0|\+?[1-9]\d*)$" class="num" name="int" [value]="int" formControlName="int" ng-model="quantity" ng-minlength="0" type="number">
<button class="plus-btn" (click)="plus()" type="button" name="btn">
<img src="../assets/images/plus.svg" alt="plus" />button>
<button type="submit" class="btnAddAction">Add to Cartbutton>
li>
ul>
div>
form>

in my controller:

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Maureen Moore6y ago
Below it says ANSWERS but this isn't the answer. It's just an improvement of the code. It wasn't possible to edit the code so I updated it below.
Maureen Moore6y ago
1. int: number=1;
3. plus(){
4. this.int++;
5. }
7. minus(){
8. this.int--;
9. }