Change olayı yalnızca girişin odağı değiştikten sonra çağrılır. Etkinliğin her tuşa basması için nasıl yapabilirim?

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

İkinci ciltleme her tuş basışında değişir.

Sadece olay girişini kullandım ve aşağıdaki gibi iyi çalıştı:

.html dosyasında:

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

.ts dosyasında:

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

Kullanım ngModelChangeyukarı kırarak [(x)]iki adet, yani mülkiyet veri bağlama ve olay bağlayıcı içine sözdizimi:

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

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

Geri tuşu için de çalışır.

(Keyup) etkinliği en iyi bahistir.

Bakalım neden:

1. Bahsettiğiniz gibi (değişiklik) yalnızca giriş odağı kaybettiğinde tetiklenir, bu nedenle sınırlı kullanım vardır.
2. (tuşa basma ) tuşlara basmayı tetikler, ancak geri al gibi belirli tuş vuruşlarını tetiklemez.
3. ( tuş ) her tuşa basıldığında tetiklenir. Dolayısıyla daima 1 karakter gecikmektedir; tuş vuruşu kaydedilmeden önce öğe durumunu alır.
4. (keyup) , bir tuş etkinliğinin her tamamlanışında tetiklendiği için en iyi bahistir, bu nedenle en son karakteri de içerir.

Yani (keyup) gitmek için en güvenli olanı çünkü ...

• (değiştir) olayın aksine her tuş vuruşuna bir olay kaydeder
• (tuşa basma) yok sayan tuşları içerir
• (keydown) olayından farklı olarak gecikme yok

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

Bu tür durumları ele almanın farklı bir yolu, formControl'ü kullanmak ve valueChangesbileşeniniz başlatıldığında ona abone olmaktır ; bu, http isteklerini yerine getirmek, kullanıcı bir cümle yazmayı bitirene kadar son kez almak, son değeri almak için röportaj uygulamanızı sağlar. ve daha önce atlayın, ...

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

Açısal ngModel'i senkronize tutan gizli olay, olay çağrısı girdisidir . Bu nedenle, sorunuzun en iyi yanıtı şöyle olmalıdır:

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

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

arşiv .ts

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

Aradığın şey

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

Ardından this.mymodel, .ts dosyanızdaki sınırlamaya erişerek verilerle istediğinizi yapın.

Benim durumumda, çözüm:

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

Reaktif Formlar için tüm alanlarda veya yalnızca belirli bir alanda yapılan değişikliklere abone olabilirsiniz.

Bir FormGroup'un tüm değişikliklerini alın:

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

Belirli bir alanın değişikliğini alın:

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

Bir sayı alanında keyup kullanıyorum, ancak bugün kromda girişin keyup tarafından tanınmayan değeri artırmak / azaltmak için yukarı / aşağı düğmeleri olduğunu fark ettim.

Benim çözümüm keyup kullanmak ve birlikte değiştirmek:

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

İlk testler bunun iyi çalıştığını, daha fazla testten sonra bulunan herhangi bir hata varsa geri göndereceğini gösterir.