change 이벤트는 입력의 포커스가 변경된 후에 만 ​​호출됩니다. 키를 누를 때마다 이벤트가 발생하도록하려면 어떻게해야합니까?

<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구성 요소가 초기화 될 때 구독 하는 것입니다 .http 요청 수행과 같은 고급 요구 사항에 rxjs 연산자 를 사용 하고 문장 작성이 끝날 때까지 디 바운스를 적용하고 마지막 값을 취할 수 있습니다 이전을 생략하고 ...

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"

초기 테스트는 이것이 제대로 작동 함을 나타내며 추가 테스트 후 버그가 발견되면 다시 게시합니다.