Angular is updating all fields simultaneously when it should just update one

[Maureen Moore]

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 Cart</button>
</li>
</ul>
</div>
</form>

in my controller:

int: number=1;
i=0;


plus(){
this.i++;
this.int=this.i;
}




minus(){  
this.i--;
this.int=this.i;  
if (this.i < 0) {
this.i = 0;  
this.int=this.i;  
}  
}

[Maureen Moore]

int: number=1;
 
plus(){
this.int++;
}


minus(){
this.int--;
}

[Sriram V]

Can you provide a stack blitz link to review and troubleshoot?

Sent from BlueMail

On Jul 6, 2020, at 4:50 PM, Maureen Moore <maka...@gmail.com> wrote:

int : number = 1 ;
 
plus (){
this . int ++;
}


minus (){
this . int --;
}

On Monday, July 6, 2020 at 10:56:53 AM UTC-4, Maureen Moore wrote:

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 Cart </button>
</li>
</ul>
</div>
</form>

in my controller:

int : number = 1 ;
i = 0 ;


plus (){
this . i ++;
this . int = this . i ;
}




minus (){  
this . i --;
this . int = this . i ;  
if ( this . i < 0 ) {
this . i = 0 ;  
this . int = this . i ;  
}  
}

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/fd43a608-0cac-42a2-8571-339d288cdacco%40googlegroups.com.

[bastien lemaire]

The input seems badly configured. We can see a 'value' 'formcontrolname'and 'ngModel' binding. There should only be one of them.

Additionally if you wish to have each product to keep track of their own quantity, you will need to create a component which receives the product data.

<div *ngFor='product of products'>

  <product data="product" ></product>

</div>

To view this discussion on the web visit https://groups.google.com/d/msgid/angular/990feabf-a16d-4643-9e60-e4e82400f4cf%40gmail.com.