route - Evento de alteração angular 2 em cada tecla



angular title route (6)

O evento de mudança só é chamado depois que o foco da entrada foi alterado. Como posso fazer com que o evento seja acionado em todas as teclas?

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

A segunda ligação é alterada em todos os pressionamentos de tecla.


Answer #1

O evento (chave) é a sua melhor aposta.

Vamos ver porque:

  1. (mudança) como você mencionou, aciona apenas quando a entrada perde o foco, portanto, é de uso limitado.
  2. (tecla pressionada) dispara na tecla pressionada, mas não dispara em certas teclas, como o backspace.
  3. (keydown) dispara toda vez que uma tecla é pressionada. Por isso, sempre fica em 1 caractere; ao obter o estado do elemento antes de o pressionamento de tecla ser registrado.
  4. (keyup) é a sua melhor aposta, pois é acionada toda vez que um evento de push key é concluído, portanto, isso também inclui o personagem mais recente.

Então (chave) é o mais seguro para ir porque ...

  • registra um evento em cada evento keystroke ao contrário de (mudança)
  • inclui as teclas que (keypress) ignora
  • não tem atraso ao contrário do evento (keydown)

Answer #2

Eu usei apenas a entrada de eventos e funcionou bem como segue:

no arquivo .html:

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

no arquivo .ts:

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

Answer #3

O evento secreto que mantém ngModel síncrono angular é a entrada da chamada de evento. Portanto, a melhor resposta para sua pergunta deve ser:

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

Answer #4

O que você está procurando é

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

Em seguida, faça o que quiser com os dados, acessando o this.mymodel ligado em seu arquivo .ts.


Answer #5

Use ngModelChange dividindo a sintaxe [(x)] em suas duas partes, ou seja, ligação de dados de propriedades e ligação de eventos:

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

Ele também funciona para a tecla de retrocesso.


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

arquivo .ts

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




angular