每次用户更新Angular中的输入文本字段时调用函数

Question

我的目标是每当用户在输入文本字段中修改时调用函数。

在我的例子中，每当用户在文本字段中添加或删除一个字符时，它应该在同步中调用didModify()，从而将changeCounter加1。

我的.html：

<div class="pb-1">
  <input maxlength="10" placeholder="Text">
</div>
<p class="changedClass">{{changeCounter}}</p>

我的.ts

export class AppComponent  {
  name = 'Angular 6';
  text1 = '';
  changeCounter = 0;

  didModify() {
    this.changeCounter = this.changeCounter + 1;
    return this.changeCounter;
  }
}

Live Demo is here.

我在过去看到它是$ watch但我在Angular 5的官方文档中找不到一个例子。

Answer 1

如果它使用[(ngModel)]绑定，你可以使用(ngModelChange)，如下所示：

<input maxlength="10" placeholder="Text" (ngModelChange)="didModify()" [(ngModel)]="text1">

这将在每次值改变时调用didModify，即每次击键

https://stackblitz.com/edit/angular-5zgbqm?file=src/app/app.component.html

Answer 2

只需绑定到input事件，只要输入内容以任何方式被修改（包括粘贴，选择和删除等），就会触发该事件：

<input (input)="didModify()" ... />

你在这。

https://stackblitz.com/edit/angular-ibuqqf