L'evento change viene chiamato solo dopo che il focus dell'ingresso è cambiato. Come posso farlo in modo che l'evento si attivi ad ogni pressione dei tasti?

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

La seconda associazione cambia ad ogni pressione di tasto tra i tasti.

Ho appena usato l'input dell'evento e ha funzionato bene come segue:

nel file .html:

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

nel file .ts:

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

Utilizzare ngModelChangesuddividendo la [(x)]sintassi nei suoi due pezzi, ovvero il databinding delle proprietà e il binding degli eventi:

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

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

Funziona anche con il tasto Backspace.

L'evento (keyup) è la soluzione migliore.

Vediamo perché:

1. (modifica) come hai menzionato, si innesca solo quando l'ingresso perde la messa a fuoco, quindi è di utilità limitata.
2. (pressione dei tasti) si attiva alla pressione dei tasti ma non si attiva in determinati tasti come il backspace.
3. (keydown) si attiva ogni volta che un tasto viene premuto. Quindi ritarda sempre di 1 carattere; poiché ottiene lo stato dell'elemento prima della registrazione della sequenza di tasti.
4. (keyup) è la soluzione migliore in quanto si innesca ogni volta che un evento push di tasti viene completato, quindi include anche il personaggio più recente.

Quindi (keyup) è il più sicuro da usare perché ...

• registra un evento ad ogni sequenza di tasti a differenza dell'evento (modifica)
• include i tasti che (pressione tasti) ignora
• non ha alcun ritardo a differenza dell'evento (keydown)

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

Un modo diverso di gestire tali casi è usare formControl e iscriversi a valueChangesquando viene inizializzato il componente, che ti consentirà di utilizzare gli operatori rxjs per requisiti avanzati come l'esecuzione di richieste http, applicare un rimbalzo fino a quando l'utente finisce di scrivere una frase, prendere l'ultimo valore e omettere precedente, ...

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);
      });
  }
}

L'evento segreto che mantiene sincrono ngModel angolare è l' input della chiamata dell'evento . Quindi la migliore risposta alla tua domanda dovrebbe essere:

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

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

archivio .ts

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

Quello che stai cercando è

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

Quindi fai quello che vuoi con i dati accedendo al limite this.mymodelnel tuo file .ts.

Nel mio caso, la soluzione è:

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

Per i moduli reattivi, è possibile iscriversi alle modifiche apportate a tutti i campi o solo a un determinato campo.

Ricevi tutte le modifiche di un FormGroup:

this.orderForm.valueChanges.subscribe(value => {
    console.dir(value);
});

Ottieni il cambio di un campo specifico:

this.orderForm.get('orderPriority').valueChanges.subscribe(value => {
    console.log(value);
  });

Ho usato il keyup su un campo numerico, ma oggi ho notato in Chrome che l'input ha i pulsanti su / giù per aumentare / diminuire il valore che non sono riconosciuti dal keyup.

La mia soluzione è usare il keyup e cambiare insieme:

(keyup)="unitsChanged[i] = true" (change)="unitsChanged[i] = true"

I test iniziali indicano che funziona correttamente, verranno inviati di nuovo in caso di bug riscontrati dopo ulteriori test.