Estoy tratando de restringir manualmente que el usuario ingrese un valor en la entrada más de un cierto valor. Estoy usando Angular 9 y ngModel en la entrada.

Como puede ver en el siguiente código, en ngModelChange, si el valor de entrada para la age es mayor que 27, lo configuro en 27.

Si el usuario ingresa un número mayor como 144, muestra 27 en el cuadro de entrada tan pronto como el usuario ingresa los últimos 4. Pero para los números que tienen 27 como prefijo, por ejemplo, 271, 2700, etc., el valor que se muestra en la entrada la caja no se modifica. ¿Alguien sabe por qué y hay alguna manera de que se muestre correctamente?

Tenga en cuenta que la age variable se establece correctamente en 27 para todos los números más grandes. Solo que la visualización del cuadro de entrada no cambia para los números que tienen 27 como prefijo.

Aquí está el enlace de Codepen: https://codepen.io/baggasumit/pen/MWVgaqZ

 @Component({ selector: 'my-app', template: ` <h1>ngModel Example</h1> <label>Age </label> <input type="number" max="27" [ngModel]="age" (ngModelChange)=onAgeChange($event) /> <br> <br> <div>Age is set to {{age}}</div> ` }) class AppComponent { public age; public onAgeChange(newAge) { if (newAge > 27) { this.age = 27; } else { this.age = newAge; } console.log(this.age); } }