Angular 2在每次按键时改变事件

更改事件仅在输入的焦点发生更改后才被调用。我怎样才能使事件在每次按键时触发?

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

第二次绑定在每个按键上都发生变化。

当前回答

我用下面的代码在Angular 11中解决了这个问题:

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

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

PS:我尝试了以上所有的解决方案，但都不奏效。

其他回答

我只是使用事件输入，它工作得很好如下:

在.html文件中:

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

在.ts文件中:

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

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

更新

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

警告:由于此事件已弃用，您应该使用beforeinput或keydown代替。

在我的案例中，解决方案是:

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

通过将[(x)]语法分解成两部分来使用ngModelChange，即属性绑定和事件绑定:

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

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

它也适用于退格键。

保持angular ngModel同步的秘密事件是事件调用输入。因此，你的问题的最佳答案应该是:

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

推荐文章