모든 키 누르기에서 Angular 2 변경 이벤트

모든 키 누르기에서 Angular 2 변경 이벤트

변경 이벤트는 입력의 포커스가 변경된 후에만 호출됩니다.모든 키 프레스에서 이벤트가 실행되도록 하려면 어떻게 해야 합니까?

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

두 번째 바인딩은 모든 키를 누를 때마다 변경됩니다.

방금 이벤트 입력을 사용했는데 다음과 같이 정상적으로 작동했습니다.

.vmx 파일:

<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. (keypress) 키를 누르면 트리거되지만 백스페이스와 같은 특정 키 입력에서는 트리거되지 않습니다.
3. (keydown) 키를 누를 때마다 트리거합니다.따라서 키 입력이 등록되기 전에 요소 상태를 얻기 때문에 항상 1자씩 지연됩니다.
4. (keyup)은 키 푸시 이벤트가 완료될 때마다 트리거되므로 가장 최근의 문자도 포함됩니다.

그래서 (키업)이 가장 안전합니다. 왜냐하면...

• (변경) 이벤트와 달리 모든 키 입력에 이벤트를 등록합니다.
• (키프레스)가 무시하는 키 포함
• (키다운) 이벤트와 달리 지연이 없습니다.

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

갱신하다

https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event

경고: 이 이벤트는 더 이상 사용되지 않으므로 입력 전에 사용하거나 키를 눌러야 합니다.

이러한 경우를 처리하는 또 다른 방법은 formControl을 사용하고 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 {
  public searchControl: FormControl;
  public 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){
...
...
}

반응형 양식의 경우 모든 필드 또는 특정 필드에 대한 변경사항을 구독할 수 있습니다.

FormGroup의 모든 변경 내용 가져오기:

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

특정 필드의 변경 내용을 가져옵니다.

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

저는 아래 코드를 사용하여 Angular 11에서 이 문제를 해결할 수 있었습니다.

<input type="number" min="0" max="50" [value]="input.to" name="to"
        (input)="input.to=$event.target.value; experienceToAndFrom()">

리고그.experienceToAndFrom()내 구성 요소의 메소드입니다.

PS: 위의 모든 해결책을 시도해봤지만 소용이 없었습니다.

당신이 찾고 있는 것은

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

다음 해서 원하는 대로 데이터를 처리하세요.this.mymodelts 파일에 있습니다.

제 경우 해결책은 다음과 같습니다.

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

숫자 필드에서 키업을 사용해 왔지만, 오늘 크롬에서 입력에 위/아래 버튼이 있어 키업에서 인식되지 않는 값을 늘리거나 줄입니다.

내 솔루션은 키업과 변경을 함께 사용하는 것입니다.

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

초기 테스트에 따르면 이 기능은 정상적으로 작동하며, 추가 테스트 후 버그가 발견되면 다시 게시됩니다.

이 질문은 여러 가지 방법으로 답변되었습니다.그러나 변경 이벤트에 대해 작업을 수행하기 전에 지연을 추가하는 것과 같은 다른 방법을 보려면 각도 형식 값 변경()과 함께 debounceTime() 메서드를 사용할 수 있습니다.이 코드는 ngOnInit() hook에 추가하거나 별도의 메서드를 생성하여 ngOnInit()에서 호출해야 합니다.

  ngOnInit(): void {
    this.formNameInputChange();
  }

  formNameInputChange(){
    const name = this.homeForm.get('name'); // Form Control Name
    name?.valueChanges.pipe(debounceTime(1000)).subscribe(value => {
      alert(value);
    });
  }
  // this is reactive way..
  homeForm = this.fb.group({
    name:['']
  });

언급URL : https://stackoverflow.com/questions/35359358/angular-2-change-event-on-every-keypress