Zdarzenie zmiany jest wywoływane dopiero po zmianie fokusa wejścia. Jak mogę to zrobić, aby zdarzenie było uruchamiane przy każdym naciśnięciu klawisza?

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

Drugie wiązanie zmienia się przy każdym naciśnięciu klawisza btw.

Właśnie użyłem danych wejściowych zdarzenia i działało to w następujący sposób:

w pliku .html:

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

w pliku .ts:

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

Użyj ngModelChange, dzieląc [(x)]składnię na dwie części, tj. Wiązanie danych właściwości i wiązanie zdarzeń:

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

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

Działa również z klawiszem Backspace.

Wydarzenie (keyup) jest najlepszym wyborem.

Zobaczmy, dlaczego:

1. (zmień), jak wspomniałeś, wyzwalacze tylko wtedy, gdy sygnał wejściowy traci fokus, dlatego ma ograniczone zastosowanie.
2. (naciśnięcie klawisza) uruchamia się po naciśnięciu klawisza, ale nie uruchamia się po niektórych naciśnięciach klawiszy, takich jak Backspace.
3. (keydown) uruchamia się za każdym razem, gdy klawisz jest wciśnięty w dół. Dlatego zawsze jest opóźniony o 1 znak; ponieważ dostaje stan elementu przed zarejestrowaniem naciśnięcia klawisza.
4. (keyup) jest twoim najlepszym zakładem, ponieważ uruchamia się za każdym razem, gdy kończy się zdarzenie push push, dlatego obejmuje to również najnowszą postać.

Tak więc (keyup) jest najbezpieczniejszy, ponieważ ...

• rejestruje zdarzenie przy każdym naciśnięciu klawisza, w przeciwieństwie do zdarzenia (zmiany)
• obejmuje klawisze, które (naciśnięcie klawisza) ignoruje
• nie ma opóźnienia w przeciwieństwie do zdarzenia (keydown)

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

Innym sposobem radzenia sobie z takimi przypadkami jest użycie formControl i zasubskrybowanie go valueChangespodczas inicjowania komponentu, co pozwoli ci używać operatorów rxjs do zaawansowanych wymagań, takich jak wykonywanie żądań HTTP, stosowanie debounce do momentu, aż użytkownik skończy pisać zdanie, przyjmie ostatnią wartość i pomiń poprzednie ...

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

Sekretnym zdarzeniem, które utrzymuje synchronizację kątową ngModel, jest wejście wywołania zdarzenia . Dlatego najlepszą odpowiedzią na twoje pytanie powinno być:

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

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

archiwum .ts

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

To czego szukasz

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

Następnie rób co chcesz z danymi, uzyskując dostęp do powiązania this.mymodelw pliku .ts.

W moim przypadku rozwiązaniem jest:

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

W przypadku formularzy reaktywnych możesz subskrybować zmiany wprowadzone we wszystkich polach lub tylko w określonym polu.

Pobierz wszystkie zmiany z FormGroup:

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

Uzyskaj zmianę określonego pola:

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

Używam keyup na polu liczbowym, ale dzisiaj zauważyłem w chromie, że wejście ma przyciski góra / dół do zwiększania / zmniejszania wartości, które nie są rozpoznawane przez keyup.

Moim rozwiązaniem jest użycie klucza i zmiana razem:

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

Wstępne testy wskazują, że to działa poprawnie, prześlemy je ponownie, jeśli zostaną wykryte błędy po dalszych testach.