FormGroup 上的 ValueChanges 在 KeyUp 和 onBlur 上触发

Question

我的 Reactive 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 在 KeyUp 和 onBlur 上被触发？

Answer 1

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

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

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

stackblitz demo

distinctUntilChanged

FormGroup 上的 ValueChanges 在 KeyUp 和 onBlur 上触发

ValueChanges on FormGroup is fired onKeyUp and onBlur

angular

angular-reactive-forms

valuechangelistener