Angular - 在 onBlur 上更改输入时进行服务调用

Question

我想检测输入的文本是否在 Angular 的 onBlur 事件中发生了变化。如果是，则执行一些操作：

处理模糊的条件：

• 仅当文本输入更改时才应捕获/处理。
• 如果输入没有改变，那么它不应该被处理。

这是已建立模糊事件的代码版本的 stackblitz 链接。但即使输入未更改，它也会登录控制台：

https://stackblitz.com/edit/angular-ngmodelchange-blur-8er79o?file=app/app.component.ts

Answer 1

你可以做什么：

1. 当元素获得焦点时，保存当前值
2. 当元素失去焦点时，将当前值与保存的值进行比较
3. 如果值改变了做处理

<input (focus)="saveValue()" (blur)="processChange()" [(ngModel)]="someValue" ... />

someValue = "nice";
prevValue = this.someValue;

saveValue() {
  this.prevValue = this.someValue;
}

processChange() {
  if (this.someValue !== this.prevValue) {
    console.log("The value has changed!!!");
    // Do some additional processing...
  }
}

有关演示，请参阅此 stackblitz。

如果不想更改组件代码，请将值保存在元素的属性中：

<input #txt type="text" name="field" 
  (focus)="txt.setAttribute('data-value', someValue)" 
  (blur)="txt.getAttribute('data-value') !== someValue ? processChange() : ''" 
  [(ngModel)]="someValue" />

有关演示，请参阅此 stackblitz。