Ответ 1

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

в .html файле:

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

в файле .ts:

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

Ответ 2

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

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

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

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

Ответ 3

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

Давайте посмотрим, почему:

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

Так что (keyup) безопаснее всего, потому что это...

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

Ответ 4

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

Ответ 5

Тайное событие, которое поддерживает angular ngModel synchronous - это вызов события . Следовательно, лучший ответ на ваш вопрос должен быть:

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

Ответ 6

Другим способом обработки таких случаев является использование 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);
      });
  }
}

Ответ 7

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

архив .ts

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

Ответ 8

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

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

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

Ответ 9

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

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