FormGroup 上的 ValueChanges 被触发 onKeyUp 和 onBlur答案

【问题标题】：ValueChanges on FormGroup is fired onKeyUp and onBlurFormGroup 上的 ValueChanges 被触发 onKeyUp 和 onBlur
【发布时间】：2019-03-20 21:21:30
【问题描述】：

如果表单有效，我的反应式 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 可能是我的错误吗？还是有其他方法可以防止valueChanges 被 onKeyUp 和 onBlur 触发？

【问题讨论】：

标签： angular angular-reactive-forms valuechangelistener

【解决方案1】：

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

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

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

stackblitz demo

distinctUntilChanged

【讨论】：

适用于我的情况。谢谢！