Myujth

I'm trying to modify an input value as a user types. Consider this simplified example:

app.component.html

<label for="testInput">Enter Text Here: </label>
<input
 id="testInput"
 type="text"
 [ngModel]="inputVal"
 (ngModelChange)="handleChange($event)"
>

app.component.ts

import Component from '@angular/core';

@Component(
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
)
export class AppComponent 
 inputVal: string = '';
 handleChange(newVal) 
 let justDigits = newVal.replace(/[^0-9]/g, '');
 console.log('The new value with just digits: ', justDigits);
 this.inputVal = justDigits;
 

The console log clearly shows that handleChange is running and strips out non-digits. However, the form value doesn't reflect that. For instance if you were to type '123abc', the form value would display just that. The console log would show '1', then '12', then '123' four times.

Coming from a lot of React, this is bizarre. What's going on here?

Your problem is change detection, if you type in '1a2b3c' you will see the following on the page itself:

1
1a
12
12b
123
123c

This is because inputVal doesn't change if your input ends with letters.

A possible solution is to trigger change detection. This can be done as follows:

import Component, ChangeDetectorRef from '@angular/core';

@Component(
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
)
export class AppComponent 
 inputVal: string = '';

 constructor(private cdr: ChangeDetectorRef) 

 handleChange(newVal) 
 let justDigits = newVal.replace(/[^0-9]/g, '');
 console.log('The new value with just digits: ', justDigits);
 this.inputVal = null; // Change the model and trigger a change detection
 this.cdr.detectChanges();
 this.inputVal = justDigits;// Change it again, and let the change detection happen
 

Stackblitz: https://stackblitz.com/edit/angular-l14ehr

For this kind of scenario, the best would be to have pipe. In your case you can have pipe which will filter everything except number.

Here the NumberDirective which allow numbers only.

import Directive, ElementRef, HostListener, Input from '@angular/core';
import NgControl from '@angular/forms';

@Directive(
 selector: 'input[numbersOnly]'
)
export class NumberDirective 

 constructor(private _el: ElementRef) 

 @HostListener('input', ['$event']) onInputChange(event) 
 const initalValue = this._el.nativeElement.value;
 this._el.nativeElement.value = initalValue.replace(/[^0-9]*/g, '');
 if (initalValue !== this._el.nativeElement.value) 
 event.stopPropagation();
 
 

Here is the working demo - https://stackblitz.com/edit/angular-numbers-only-directive-2qm1cc