Question

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

在我的示例中，每次用户在文本字段中添加或删除字符时，都应在同步中调用didModify()，从而将{1}添加到changeCounter。

我的 .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

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

2 个答案: