L'événement change n'est appelé qu'après que le focus de l'entrée a changé. Comment puis-je faire en sorte que l'événement se déclenche à chaque pression de touche?

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

La deuxième liaison change à chaque pression de touche btw.

Je viens d'utiliser l'entrée d'événement et cela a bien fonctionné comme suit:

dans le fichier .html:

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

dans le fichier .ts:

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

À utiliser ngModelChangeen décomposant la [(x)]syntaxe en ses deux parties, à savoir la liaison de données de propriété et la liaison d'événement:

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

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

Cela fonctionne également pour la touche de retour arrière.

L'événement (keyup) est votre meilleur pari.

Voyons pourquoi:

1. (changement) comme vous l'avez mentionné ne se déclenche que lorsque l'entrée perd le focus, donc est d'une utilité limitée.
2. (pression de touche) se déclenche à la pression des touches mais ne se déclenche pas sur certaines frappes comme le retour arrière.
3. (keydown) se déclenche chaque fois qu'une touche est enfoncée. D'où toujours un retard de 1 caractère; car il obtient l'état de l'élément avant l'enregistrement de la frappe.
4. (keyup) est votre meilleur pari car il se déclenche à chaque fois qu'un événement push clé est terminé, donc cela inclut également le personnage le plus récent.

Donc (keyup) est le plus sûr car il ...

• enregistre un événement à chaque frappe, contrairement à l'événement (change)
• inclut les touches que (pression sur une touche) ignore
• n'a pas de décalage contrairement à l'événement (keydown)

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

Une autre façon de gérer de tels cas est d'utiliser formControl et de vous y abonner valueChangeslorsque votre composant est initialisé, ce qui vous permettra d'utiliser les opérateurs rxjs pour des exigences avancées telles que l'exécution de requêtes http, d'appliquer un rebounce jusqu'à ce que l'utilisateur ait fini d'écrire une phrase, de prendre la dernière valeur et omettre le précédent, ...

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'événement secret qui maintient le ngModel angulaire synchrone est l' entrée d' appel d'événement . Par conséquent, la meilleure réponse à votre question devrait être:

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

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

archive .ts

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

Ce que vous cherchez c'est

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

this.mymodelFaites ensuite ce que vous voulez avec les données en accédant à la limite de votre fichier .ts.

Dans mon cas, la solution est:

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

Pour les formulaires réactifs, vous pouvez vous abonner aux modifications apportées à tous les champs ou simplement à un champ particulier.

Obtenez toutes les modifications d'un FormGroup:

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

Obtenez le changement d'un champ spécifique:

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

J'utilise keyup sur un champ numérique, mais aujourd'hui j'ai remarqué en chrome l'entrée a des boutons haut / bas pour augmenter / diminuer la valeur qui n'est pas reconnue par keyup.

Ma solution consiste à utiliser les touches et à changer ensemble:

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

Les tests initiaux indiquent que cela fonctionne bien, publieront si des bogues ont été trouvés après des tests supplémentaires.