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

【问题标题】：Call a function every time a user updates an input text field in Angular每次用户更新 Angular 中的输入文本字段时调用一个函数
【发布时间】：2018-11-26 05:41:30
【问题描述】：

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

在我的示例中，每次用户在文本字段中添加或删除字符时，它都应同步调用 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 的官方文档中找不到示例。

【问题讨论】：

标签： angular typescript binding

【解决方案1】：

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

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

你来了。

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：