Событие изменения вызывается только после изменения фокуса ввода. Как сделать так, чтобы событие срабатывало при каждом нажатии клавиши?

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

Второе связывание меняется при каждом нажатии клавиши между прочим.

Я просто использовал ввод события, и он работал нормально следующим образом:

в .html файле:

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

в файле .ts:

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

Используйте ngModelChange, разбив [(x)]синтаксис на две части, то есть привязку данных свойства и привязку события:

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

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

Это работает и для клавиши возврата.

Событие (keyup) - ваш лучший выбор.

Посмотрим почему:

1. (изменить), как вы упомянули, срабатывает только тогда, когда вход теряет фокус, поэтому имеет ограниченное использование.
2. (нажатие клавиши) срабатывает при нажатии клавиш, но не срабатывает при определенных нажатиях клавиш, например, при возврате.
3. (keydown) срабатывает каждый раз, когда нажимается клавиша. Следовательно, всегда отстает на 1 символ; так как он получает состояние элемента до того, как было зарегистрировано нажатие клавиши.
4. (keyup) - ваша лучшая ставка, так как она срабатывает каждый раз, когда завершается событие нажатия клавиши, поэтому сюда также входит самый последний символ.

Итак, (keyup) - самый безопасный вариант, потому что ...

• регистрирует событие при каждом нажатии клавиши в отличие от (изменения) события
• включает в себя ключи, которые (нажатие клавиши) игнорирует
• не имеет задержки в отличие от события (keydown)

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

Другим способом обработки таких случаев является использование formControl и подписка на него valueChangesпри инициализации вашего компонента, что позволит вам использовать операторы rxjs для расширенных требований, таких как выполнение http-запросов, применение debounce до тех пор, пока пользователь не закончит писать предложение, принять последнее значение и пропустить предыдущее, ...

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

Секретное событие, которое поддерживает угловую ngModel синхронной, является вводом вызова события . Следовательно, лучший ответ на ваш вопрос должен быть:

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

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

архив .ts

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

То, что вы ищете, это

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

Затем делайте с данными все, что хотите, this.mymodelоткрывая границы в вашем файле .ts.

В моем случае решение состоит в следующем:

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

Для Реактивных форм вы можете подписаться на изменения, внесенные во все поля или только в определенное поле.

Получить все изменения FormGroup:

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

Получить изменение конкретного поля:

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

Я использовал keyup для числового поля, но сегодня я заметил, что в chrome на входе есть кнопки вверх / вниз для увеличения / уменьшения значения, которые не распознаются keyup.

Мое решение состоит в том, чтобы использовать keyup и изменить вместе:

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

Первоначальные тесты показывают, что это работает нормально, будут публиковать сообщения, если после дальнейшего тестирования будут обнаружены ошибки.