Acara perubahan hanya dipanggil setelah fokus input berubah. Bagaimana saya bisa membuatnya sehingga acara ini menyala pada setiap penekanan tombol?

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

Ikatan kedua berubah pada setiap penekanan tombol btw.

Saya hanya menggunakan input acara dan bekerja dengan baik sebagai berikut:

dalam file .html:

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

dalam file .ts:

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

Gunakan ngModelChangedengan memecah [(x)]sintaks menjadi dua bagian, yaitu penyatuan data properti dan pengikatan acara:

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

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

Ini juga berfungsi untuk tombol backspace.

Acara (keyup) adalah taruhan terbaik Anda.

Mari kita lihat mengapa:

1. (ubah) seperti yang Anda sebutkan hanya memicu ketika input kehilangan fokus, karenanya penggunaan terbatas.
2. (penekanan tombol) memicu pada penekanan tombol tetapi tidak memicu pada penekanan tombol tertentu seperti backspace.
3. (keydown) memicu setiap kali kunci ditekan ke bawah. Karenanya selalu tertinggal 1 karakter; karena mendapat status elemen sebelum keystroke didaftarkan.
4. (keyup) adalah taruhan terbaik Anda karena memicu setiap kali acara push key telah selesai, maka ini juga termasuk karakter terbaru.

Jadi (keyup) adalah yang paling aman untuk digunakan karena ...

• mendaftarkan suatu acara pada setiap penekanan tombol tidak seperti acara (perubahan)
• termasuk kunci yang (ditekan tombol) mengabaikan
• tidak memiliki lag tidak seperti acara (keydown)

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

Cara berbeda untuk menangani kasus tersebut adalah dengan menggunakan formControl dan berlangganan valueChangesketika komponen Anda diinisialisasi, yang akan memungkinkan Anda untuk menggunakan operator rxjs untuk persyaratan lanjutan seperti melakukan permintaan http, menerapkan debounce sampai pengguna selesai menulis kalimat, mengambil nilai terakhir dan hapus sebelumnya, ...

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

Acara rahasia yang membuat ngModel tetap sinkron adalah input panggilan acara . Karenanya jawaban terbaik untuk pertanyaan Anda adalah:

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

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

arsip .ts

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

Yang Anda cari adalah

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

Kemudian lakukan apa pun yang Anda inginkan dengan data dengan mengakses terikat this.mymodeldi file .ts Anda.

Dalam kasus saya, solusinya adalah:

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

Untuk Formulir Reaktif, Anda dapat berlangganan perubahan yang dibuat untuk semua bidang atau hanya bidang tertentu.

Dapatkan semua perubahan dari FormGroup:

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

Dapatkan perubahan bidang tertentu:

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

Saya telah menggunakan keyup pada bidang angka, tetapi hari ini saya perhatikan di chrome input memiliki tombol naik / turun untuk menambah / mengurangi nilai yang tidak dikenali oleh keyup.

Solusi saya adalah dengan menggunakan keyup dan ubah bersama:

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

Tes awal menunjukkan ini berfungsi dengan baik, akan memposting kembali jika ada bug yang ditemukan setelah pengujian lebih lanjut.