Angular 11 two way binding for a numeric field: backspace not working as expected and giving junk va-CodePudding

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  (click)="addProductToCart(product,1)">
<i ></i></button>
<input type="number" [ngModel]="product.quantity" (ngModelChange)="addProductToCart(product,$event)" id="prod-qty">
<button  (click)="addProductToCart(product,-1)">
<i ></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

CodePudding user response：

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

Your input should be:

<input type="number" [(ngModel)]="product.quantity" id="prod-qty">