Sự kiện thay đổi chỉ được gọi sau khi trọng tâm của đầu vào đã thay đổi. Làm thế nào tôi có thể làm cho nó để sự kiện kích hoạt trên mọi phím bấm?

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

Các ràng buộc thứ hai thay đổi trên mỗi btw nhấn phím.

Tôi chỉ sử dụng đầu vào sự kiện và nó hoạt động tốt như sau:

trong tệp .html:

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

trong tập tin .ts:

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

Sử dụng ngModelChangebằng cách chia [(x)]cú pháp thành hai phần của nó, nghĩa là cơ sở dữ liệu thuộc tính và ràng buộc sự kiện:

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

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

Nó hoạt động cho phím backspace quá.

Sự kiện (keyup) là đặt cược tốt nhất của bạn.

Hãy xem tại sao:

1. (thay đổi) như bạn đã đề cập kích hoạt chỉ khi đầu vào mất tập trung, do đó được sử dụng hạn chế.
2. (nhấn phím) kích hoạt khi nhấn phím nhưng không kích hoạt trên một số tổ hợp phím nhất định như phím lùi.
3. (keydown) kích hoạt mỗi khi phím được nhấn xuống. Do đó luôn trễ 1 ký tự; vì nó có trạng thái phần tử trước khi tổ hợp phím được đăng ký.
4. (keyup) là đặt cược tốt nhất của bạn vì nó kích hoạt mỗi khi sự kiện đẩy phím hoàn thành, do đó điều này cũng bao gồm các ký tự gần đây nhất.

Vì vậy (keyup) là cách an toàn nhất để đi cùng vì nó ...

• đăng ký một sự kiện trên mỗi tổ hợp phím không giống như sự kiện (thay đổi)
• bao gồm các phím (nhấn phím) bỏ qua
• không có độ trễ không giống như sự kiện (keydown)

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

Một cách khác để xử lý các trường hợp như vậy là sử dụng formControl và đăng ký nó valueChangeskhi thành phần của bạn được khởi tạo, điều này sẽ cho phép bạn sử dụng các toán tử rxjs cho các yêu cầu nâng cao như thực hiện các yêu cầu http, áp dụng gỡ lỗi cho đến khi người dùng viết xong câu, lấy giá trị cuối cùng và bỏ qua trước đó, ...

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

Sự kiện bí mật giữ cho đồng bộ ngModel góc cạnh là đầu vào cuộc gọi sự kiện . Do đó, câu trả lời tốt nhất cho câu hỏi của bạn nên là:

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

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

lưu trữ .ts

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

Những gì bạn đang tìm kiếm là

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

Sau đó, làm bất cứ điều gì bạn muốn với dữ liệu bằng cách truy cập vào ràng buộc this.mymodeltrong tệp .ts của bạn.

Trong trường hợp của tôi, giải pháp là:

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

Đối với Biểu mẫu phản ứng, bạn có thể đăng ký các thay đổi được thực hiện cho tất cả các trường hoặc chỉ một trường cụ thể.

Nhận tất cả các thay đổi của Formgroup:

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

Nhận thay đổi của một lĩnh vực cụ thể:

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

Tôi đã sử dụng keyup trên một trường số, nhưng hôm nay tôi nhận thấy trong chrome, đầu vào có các nút tăng / giảm để tăng / giảm giá trị mà keyup không nhận ra.

Giải pháp của tôi là sử dụng keyup và thay đổi cùng nhau:

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

Các thử nghiệm ban đầu cho thấy điều này hoạt động tốt, sẽ gửi lại nếu có bất kỳ lỗi nào được tìm thấy sau khi thử nghiệm thêm.