时间戳

首页 > 解决方案 > FormGroup 上的 ValueChanges 被触发 onKeyUp 和 onBlur

angular - FormGroup 上的 ValueChanges 被触发 onKeyUp 和 onBlur

问题描述

如果表单有效，我的反应式 Angular 表单应该在 Key Up 上提交。

我注册了一个订阅者，valueChanges但它被称为每个输入的 onKeyUp 和 onBlur 并且表单被提交了两次。这似乎是一个已知问题（https://github.com/angular/angular/issues/12540）并且建议作为解决方案distinctUntilChanged。不幸的是，在我的情况下似乎不起作用。无论我设置什么时间，提交都会立即被触发，并且仍然被触发两次。

this.myFormGroup.valueChanges
  .pipe(debounceTime(2000), distinctUntilChanged())
  .subscribe(() => {
    if (this.myFormGroup.valid) {
      this.submitForm();
    }
  });

有人知道我的错误可能是什么distinctUntilChanged吗？还是有另一种方法可以防止valueChangesonKeyUp 和 onBlur 被触发？

标签： angularangular-reactive-formsvaluechangelistener

解决方案

distinctUntilChanged===默认使用比较，对象引用必须匹配，myFormGroup每次更改都会发出一个对象，并且这些对象不是同一个引用

尝试添加自定义方法来处理更改

distinctUntilChanged((p: any, n: any) => JSON.stringify(p) === JSON.stringify(n))

stackblitz 演示

distinctUntilChanged

推荐阅读