Подія зміни викликається лише після зміни фокусу введення. Як я можу зробити так, щоб подія почалася на кожному натисканні клавіші?

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

Друга прив'язка змінюється на кожному натисканні клавіші btw.

Я щойно використовував вхід події, і він працював чудово так:

у .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)
}

Він працює і для клавіші зворотної області.

Подія (клавіатура) - ваша найкраща ставка.

Давайте розберемося, чому:

1. (зміна), як ви згадали, спрацьовує лише тоді, коли вхід втрачає фокус, отже, він обмежений.
2. (натискання клавіші) спрацьовує при натисканні клавіш, але не спрацьовує на певних натисканнях клавіш, як, наприклад, на зворотному просторі.
3. (натискання клавіш) спрацьовує кожного разу, коли клавіша натискається вниз. Отже, завжди відстає на 1 символ; оскільки він отримує стан елемента до реєстрації натискання клавіші.
4. (клавіатура) - ваша найкраща ставка, оскільки вона спрацьовує кожного разу, коли завершується ключова подія, отже, це стосується і останнього персонажа.

Отже (клавіатура) - це найбезпечніше, тому що це ...

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

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

Іншим способом обробки таких випадків є використання formControl і підписка на нього, valueChangesколи ваш компонент ініціалізований, що дозволить вам використовувати оператори rxjs для розширених вимог, таких як виконання запитів http, застосовувати дебютацію, поки користувач не закінчить писати речення, прийме останнє значення і опустити попередній, ...

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)="unitsChanged[i] = true" (change)="unitsChanged[i] = true"

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