Das Änderungsereignis wird erst aufgerufen, nachdem sich der Fokus der Eingabe geändert hat. Wie kann ich dafür sorgen, dass das Ereignis bei jedem Tastendruck ausgelöst wird?

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

Die zweite Bindung ändert sich übrigens bei jedem Tastendruck.

Ich habe gerade die Ereigniseingabe verwendet und es hat wie folgt funktioniert:

in der HTML-Datei:

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

in .ts Datei:

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

Verwenden Sie diese Option, ngModelChangeindem Sie die [(x)]Syntax in zwei Teile aufteilen, z. B. Eigenschaftsdatenbindung und Ereignisbindung:

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

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

Es funktioniert auch für die Rücktaste.

Das (Keyup-) Event ist die beste Wahl.

Mal sehen warum:

1. (Ändern), wie Sie erwähnt haben, wird nur ausgelöst, wenn die Eingabe den Fokus verliert und daher nur begrenzt von Nutzen ist.
2. (Tastendruck) wird bei Tastendrücken ausgelöst, jedoch nicht bei bestimmten Tastenanschlägen wie der Rücktaste.
3. (Tastendruck) wird jedes Mal ausgelöst, wenn eine Taste gedrückt wird. Daher bleibt immer um 1 Zeichen zurück; wie es den Elementstatus erhält, bevor der Tastenanschlag registriert wurde.
4. (keyup) ist die beste Wahl, da es jedes Mal ausgelöst wird, wenn ein Tastendruckereignis abgeschlossen ist. Daher enthält dies auch den neuesten Charakter.

Also (keyup) ist am sichersten, weil es ...

• registriert ein Ereignis bei jedem Tastendruck im Gegensatz zu einem (Änderungs-) Ereignis
• enthält die Tasten, die (Tastendruck) ignoriert
• hat keine Verzögerung im Gegensatz zum (Keydown) Ereignis

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

Eine andere Möglichkeit, solche Fälle zu behandeln, besteht darin, formControl zu verwenden und es zu abonnieren, valueChangeswenn Ihre Komponente initialisiert wird. Auf diese Weise können Sie rxjs- Operatoren für erweiterte Anforderungen wie das Ausführen von http-Anforderungen verwenden, eine Entprellung anwenden, bis der Benutzer mit dem Schreiben eines Satzes fertig ist, und den letzten Wert annehmen und vorher weglassen, ...

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

Das geheime Ereignis, das ngModel im Winkel synchron hält, ist die Eingabe des Ereignisaufrufs . Daher sollte die beste Antwort auf Ihre Frage sein:

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

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

Archiv .ts

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

Was Sie suchen, ist

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

Machen Sie dann mit den Daten, was Sie wollen, indem Sie auf die Bindung this.mymodelin Ihrer .ts-Datei zugreifen .

In meinem Fall lautet die Lösung:

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

Bei reaktiven Formularen können Sie die Änderungen abonnieren, die an allen Feldern oder nur an einem bestimmten Feld vorgenommen wurden.

Holen Sie sich alle Änderungen einer FormGroup:

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

Holen Sie sich die Änderung eines bestimmten Feldes:

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

Ich habe Keyup für ein Zahlenfeld verwendet, aber heute habe ich festgestellt, dass der Eingang in Chrome Auf- / Ab-Tasten hat, um den Wert zu erhöhen / zu verringern, der von Keyup nicht erkannt wird.

Meine Lösung besteht darin, Keyup zu verwenden und gemeinsam zu ändern:

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

Erste Tests zeigen, dass dies einwandfrei funktioniert. Wenn nach weiteren Tests Fehler gefunden werden, werden diese zurückgesendet.