input not update view ngmodelchange

Question

I want to remove the letters and leave only numbers, the validation is fine but the input view does not update correctly. the variable "quantity" does change its value and I can show it below with
<p> {{quantity}} </p>

button-add.component.html

<input
      [ngModel]="quantity"
      (ngModelChange)="quantity = changeQuantity($event)"
    />
    <p> {{quantity}} </p>

button-add.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'button-add-button',
  templateUrl: './button-add.component.html',
  styleUrls: ['./button-add.component.scss'],
})
export class ButtonAddComponent implements OnInit {
  quantity: number = 10;
  constructor() {}

  public changeQuantity(cant: string) {
    return parseInt(cant.replace(/[^0-9]+/g, ''));
  }
}

Maybe this will be helpful: [Angular Forms: Why is ngModelChange late when updating ngModel value](https://indepth.dev/posts/1331/angular-forms-why-is-ngmodelchange-late-when-updating-ngmodel-value). — Andrei Gătej, May 14 '21 at 17:55

Amit Bisht · Answer 1 · 2021-05-14T19:02:55.177

The way you are using the ngModel is incorrect, you need to correct that first, after that instead of model change do It on the keyup event, kindly refer to below code

<input [(ngModel)]="quantity" (keyup)="changeQuantity($event)" />
<p> {{quantity}} </p>

Also instead of directly setting value in your .html keep it in your .ts and reassign it to quantity, refer to below code

public changeQuantity(cant: any) {
  this.quantity = parseInt(cant.target.value.replace(/[^0-9]+/g, ''));
}

Please find the behaviour of various events which will help you to decide when to trigger changeQuantity()

keypress or input: on every next keystroke your value will get updated
change: outside click of control will trigger this
keyup: reflects immediately but it will show a slight flicker

For better clarification on events, refer best bet event

input not update view ngmodelchange

1 Answers1