Evento de cambio de Angular 2 en cada pulsación de tecla
El evento de cambio solo se llama después de que el foco de la entrada haya cambiado. ¿Cómo puedo hacer para que el evento se active con cada pulsación de tecla?
<input type="text" [(ngModel)]="mymodel" (change)="valuechange($event)" />
{{mymodel}}
El segundo enlace cambia con cada pulsación de tecla, por cierto.
Aceptado
Solo usé la entrada del evento y funcionó bien de la siguiente manera:
en el archivo .html:
<input type="text" class="form-control" (input)="onSearchChange($event.target.value)">
en el archivo .ts:
onSearchChange(searchValue: string): void {
console.log(searchValue);
}
Úselo ngModelChangedividiendo la [(x)]sintaxis en dos partes, es decir, enlace de datos de propiedad y enlace de eventos:
<input type="text" [ngModel]="mymodel" (ngModelChange)="valuechange($event)" />
{{mymodel}}
valuechange(newValue) {
mymodel = newValue;
console.log(newValue)
}
También funciona para la tecla de retroceso.
El evento (keyup) es su mejor opción.
Veamos por qué:
- (cambiar) como mencionaste, se activa solo cuando la entrada pierde el foco, por lo tanto, es de uso limitado.
- (pulsación de tecla) se activa al presionar una tecla, pero no se activa con ciertas pulsaciones de teclas como el retroceso.
- (keydown) se activa cada vez que se presiona una tecla. Por lo tanto, siempre se retrasa 1 carácter; ya que obtiene el estado del elemento antes de que se registrara la pulsación de tecla.
- (keyup) es su mejor opción, ya que se activa cada vez que se completa un evento de pulsación de tecla, por lo que esto también incluye el carácter más reciente.
Entonces (keyup) es el más seguro porque...
- registra un evento en cada pulsación de tecla a diferencia del evento (cambio)
- incluye las teclas que (pulsación de tecla) ignora
- no tiene retraso a diferencia del evento (keydown)
