每个按键上的Angular 2更改事件

Question

只有在输入焦点发生变化后才会调用change事件.我怎样才能使事件在每个按键上触发？

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

第二个绑定在每个按键btw上发生变化.

Answer 1

我刚刚使用了事件输入,它的工作原理如下:

在.html文件中:

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

在.ts文件中:

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

Answer 2

使用ngModelChange通过打破了[(x)]语法到它的两片,即财产数据绑定和事件绑定:

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

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

它也适用于退格键.

Answer 3

(keyup)事件是你最好的选择.

让我们看看为什么:

1. (改变)就像你提到的触发器只有当输入失去焦点时,因此用途有限.
2. (按键)在按键时触发,但不会触发某些击键,如退格键.
3. 每次按下一个键时(keydown)都会触发.因此总是滞后1个字符; 因为它在按键被注册之前获得了元素状态.
4. (keyup)每次键推送事件完成时都会触发,因此这也包括最新的字符.

所以(keyup)是最安全的,因为它......

• 与(改变)事件不同,每次击键都会注册一个事件
• 与(keydown)事件不同,没有延迟
• 包括(按键)忽略的键

Answer 4

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

Answer 5

处理此类情况的另一种方法是使用formControl并valueChanges在初始化组件时订阅它,这将允许您使用rxjs运算符来执行高级要求,例如执行http请求,应用debounce直到用户完成写句子,取最后一个值并省略以前,...

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

Answer 6

保持角度ngModel同步的秘密事件是事件调用输入.因此,您问题的最佳答案应该是:

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

Answer 7

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

存档.ts

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

Answer 8

对于响应式表单，您可以订阅对所有字段或仅特定字段所做的更改。

获取 FormGroup 的所有更改：

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

获取特定字段的更改：

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

Answer 9

我设法使用以下代码在 Angular 11 中解决了这个问题：

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

而且，这experienceToAndFrom()是我的组件中的一个方法。

PS：我尝试了以上所有解决方案，但没有成功。