entre - formularios reactivos angular 5

Evento de cambio angular 2 en cada pulsación de tecla

Question

El evento de cambio solo se llama después de que el foco de la entrada ha cambiado. ¿Cómo puedo hacer que el evento se active en cada pulsación de tecla?

<input type="text" [(ngModel)]="mymodel" (change)="valuechange($event)" />
{{mymodel}}

El segundo enlace cambia en cada pulsación de tecla por cierto.

Answer 1

El evento (keyup) es tu mejor apuesta.

Veamos por qué:

1. (cambio) como mencionó, los desencadenantes solo cuando la entrada pierde el foco, por lo tanto, es de uso limitado.
2. (pulsación de tecla) se activa al presionar teclas, pero no se activa al presionar ciertas teclas como la tecla de retroceso.
3. (keydown) se activa cada vez que se presiona una tecla. Por lo tanto, siempre va por 1 carácter; a medida que obtiene el estado del elemento antes de que se registrara la pulsación de tecla.
4. (keyup) es su mejor opción, ya que se activa cada vez que se completa un evento de pulsación de tecla, por lo tanto, esto también incluye el personaje más reciente.

Entonces (keyup) es el más seguro, ya que ...

• registra un evento en cada pulsación de tecla a diferencia del evento (cambio)
• incluye las teclas que (presionar tecla) ignora
• no tiene retraso a diferencia del evento (keydown)

Answer 2

Acabo de usar la entrada del evento y funcionó bien de la siguiente manera:

en archivo .html:

<input type="text" class="form-control" (input)="onSearchChange($event.target.value)">

en el archivo .ts:

onSearchChange(searchValue: string): void {  
  console.log(searchValue);
}

Answer 3

El evento secreto que mantiene ngModel angular síncrono es la entrada de llamada de evento. Por lo tanto, la mejor respuesta a su pregunta debería ser:

<input type="text" [(ngModel)]="mymodel" (input)="valuechange($event)" />
{{mymodel}}

Answer 4

En mi caso, la solución es:

[ngModel]="X?.Y" (ngModelChange)="X.Y=$event"

Answer 5

Lo que estás buscando es

<input type="text" [(ngModel)]="mymodel" (keyup)="valuechange()" />
{{mymodel}}

Luego, haga lo que quiera con los datos accediendo al enlace this.mymodel en su archivo .ts.

Answer 6

Una forma diferente de manejar tales casos es usar formControl y suscribirse a su valueChanges cuando se inicializa su componente, lo que le permitirá usar operadores rxjs para requisitos avanzados como realizar solicitudes http, aplicar un rebote hasta que el usuario termine de escribir una oración, tome el último valor y omitir anterior, ...

import {Component, OnInit} from ''@angular/core'';
import { FormControl } from ''@angular/forms'';
import { debounceTime, distinctUntilChanged } from ''rxjs/operators'';

@Component({
  selector: ''some-selector'',
  template: `
    <input type="text" [formControl]="searchControl" placeholder="search">
  `
})
export class SomeComponent implements OnInit {
  private searchControl: FormControl;
  private debounce: number = 400;

  ngOnInit() {
    this.searchControl = new FormControl('''');
    this.searchControl.valueChanges
      .pipe(debounceTime(this.debounce), distinctUntilChanged())
      .subscribe(query => {
        console.log(query);
      });
  }
}

Answer 7

Use ngModelChange separando la sintaxis [(x)] en sus dos partes, es decir, enlace de datos de propiedad y enlace de evento:

<input type="text" [ngModel]="mymodel" (ngModelChange)="valuechange($event)" />
{{mymodel}}

valuechange(newValue) {
  mymodel = newValue;
  console.log(newValue)
}

También funciona para la tecla de retroceso.

Answer 8

<input type="text" (keypress)="myMethod(myInput.value)" #myInput />

archivo .ts

myMethod(value:string){
...
...
}

Answer 9

<input type="text" [ngModel]="mymodel" (keypress)="mymodel=$event.target.value"/>
{{mymodel}}