Me sorprendió bastante descubrir que, a diferencia de otros tipos de entradas HTML, al escribir dentro de una entrada de tipo Número se activará valueChanges en el desenfoque, y al hacer clic en las flechas giratorias (las flechas pequeñas en el costado) aparecerá valueChanges se activó dos veces, ¿es este un comportamiento esperado? ¿Me estoy perdiendo de algo?

Componente:

export class AppComponent {

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

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

}

Plantilla:

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

Aquí está Stackblitz demo

1
Rafi Henig 26 jul. 2020 a las 01:08

2 respuestas

La mejor respuesta

Esto es un problema conocido que ya se ha solucionado en Angular 10

Stackblitz bifurcado con angular 10

Antes de esta corrección, Angular aparece en dos eventos:

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

A partir de Angular 10, solo escucha uno:

host: {
     '(input)': 'onChange($event.target.value)'
1
yurzui 26 jul. 2020 a las 01:41

Parece que es un problema en algunas versiones de Angular. Alguien también informó el mismo problema en Github.

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

Parece que está arreglado en Angular 10 mientras la demostración de @ alon esté funcionando.

Creo que no es un problema crítico para ti.

Sin embargo, una solución simple es utilizar el operador distinctUntilChanged.

this.numberControl.valueChanges
  .pipe(distinctUntilChanged())
  .subscribe(console.log)
1
yash 26 jul. 2020 a las 01:56