1

I am working with Angular 11 and came across two way binding for quantity field which is an input field of the type number. Problem arrives when I try to use backspace for the quantity field input. It gives junk values which are then displayed with the correct value.

.html file

<button class="btn btn-outline-primary btn-lg" (click)="addProductToCart(product,1)">
<i class="fa-solid fa-plus"></i></button>
<input type="number" [ngModel]="product.quantity" (ngModelChange)="addProductToCart(product,$event)" id="prod-qty">
<button class="btn btn-outline-primary btn-lg" (click)="addProductToCart(product,-1)">
<i class="fa-solid fa-minus"></i></button>

.ts file

addProductToCart(pr: any, q: any){
    pr.quantity=pr.quantity+Number(q);
 }

Is there any workaround for this issue?? Please do let me know

Akram
  • 23
  • 2

1 Answers1

1

You need to use two ways binding: [(ngModel)]="binding".

Your input should be:

<input type="number" [(ngModel)]="product.quantity" id="prod-qty">
Théophile Wallez
  • 451
  • 3
  • 15
  • I tried that as well, but the issue occurs when I click on backspace. It randomly loads a junk value whenever I click on it. – Akram Jul 10 '22 at 19:56
  • You need to remove `(ngModelChange)="addProductToCart(product,$event)"` from your input as I did in my answer. – Théophile Wallez Jul 10 '22 at 22:51
  • 1
    It's working now after I removed the addProductToCart(product,$event) method. Thank you – Akram Jul 10 '22 at 22:56