CODEWITHSUNDEEP
angularangular-reactive-formsangular9
Rafi Henig
Rafi Henig

Reputation: 6432

ValueChanges is triggered on blur when input is of type Number

Unlike other types of HTML inputs, I found it rather surprising that typing into an input of type Number would trigger valueChanges when the input is blurred, as well as clicking on the spinners (the small arrows on the side) would trigger valueChanges twice, is this an expected behavior, or am I missing something?

Component:

export class AppComponent {

  textControl = new FormControl();
  numberControl = new FormControl();

  ngOnInit(): void {
    this.textControl.valueChanges.subscribe(console.log)
    this.numberControl.valueChanges.subscribe(console.log)
  }

}

Template:

<input type="text" [formControl]="numberControl">
<input type="number" [formControl]="textControl">

Here's Stackblitz demo

Upvotes: 3

Views: 2093

Answers (2)

andsilver
andsilver

Reputation: 5992

It looks it's an issue in some versions of Angular. Someone also reported the same issue on Github.

https://github.com/angular/angular/issues/26054

It looks it's fixed in Angular 10 as long as @alon's demo is working.

I believe it isn't a critical issue for you.

However, one simple solution is to use distinctUntilChanged operator.

this.numberControl.valueChanges
  .pipe(distinctUntilChanged())
  .subscribe(console.log)

Upvotes: 2

yurzui
yurzui

Reputation: 214275

This is a known issue which has been already fixed in Angular 10

Forked Stackblitz with Angular 10

Prior to this fix Angular listed to two events:

host: {
    '(change)': 'onChange($event.target.value)',
    '(input)': 'onChange($event.target.value)',

Starting from Angular 10 it listens only for one:

host: {
     '(input)': 'onChange($event.target.value)'

Upvotes: 2

Related Questions