ValueChanges в FormGroup запускается onKeyUp и onBlur

Question

Моя реактивная угловая форма должна быть отправлена ​​при 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?

Answer 1

differentUntilChanged использует === сравнение по умолчанию, ссылки на объекты должны совпадать, myFormGroup будет выдавать объект при каждом изменении, и эти объекты не совпадают ссылка

попытаться добавитьпользовательский метод для обработки изменений

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

демонстрация stackblitz

differentUntilChanged