每次按键都会发生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 ) {  
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）是最安全的，因为它......

• 在每次击键时注册一个事件，而不像（更改）事件
• 包含（keypress）忽略的键
• 与（keydown）事件
不同，没有延迟

Answer 4

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

Answer 5

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

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

Answer 6

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

valueChanges

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

您正在寻找的是

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

然后通过访问.ts文件中的绑定this.mymodel，随意对数据执行任何操作。

Answer 10

就我而言，解决方案是：

type FeedCreate = Extract<Actions, IActionWithPayload<ActionTypes.FEED_CREATE_POST, unknown>>

Answer 11

我一直在数字字段上使用键盘输入法，但是今天我注意到在chrome中，输入具有向上/向下按钮以增加/减小键盘输入法无法识别的值。

我的解决方案是使用键盘和一起更改：

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

初步测试表明它可以正常工作，如果在进一步测试后发现任何错误，则会回发。

Answer 12

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

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

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

PS：我尝试了上述所有解决方案，但没有奏效。