在 angular 中将来自 valuechanges 和 statuschanges 反应形式的 observables 与 rxjs 结合起来

Question

我正在尝试将 valueChanges 和 statusChanges 合并到一个订阅中，因为我想在这两个变化中的任何一个发生变化时做一些逻辑。

我正在尝试使用 combineLatest，一旦其中一个可观察对象获得更新，它就会触发。我遇到的问题是 rxjs 警告我 valueChanges 和 statusChanges 不可订阅。

this.control 是一个 angular FormControl

我正在使用 "rxjs": "^6.3.3"

这是我在控制台中收到的错误消息。

TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
    at subscribeTo (subscribeTo.js:41)
    at subscribeToResult (subscribeToResult.js:11)
    at CombineLatestSubscriber.push.../angular-shared-lib/node_modules/rxjs/_esm5/internal/observable/combineLatest.js.CombineLatestSubscriber._complete (combineLatest.js:62)
    at CombineLatestSubscriber.push.../angular-shared-lib/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.complete (Subscriber.js:66)
    at Observable._subscribe (subscribeToArray.js:8)
    at Observable.push.../angular-shared-lib/node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:43)
    at Observable.push.../angular-shared-lib/node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:29)
    at CombineLatestOperator.push.../angular-shared-lib/node_modules/rxjs/_esm5/internal/observable/combineLatest.js.CombineLatestOperator.call (combineLatest.js:32)
    at Observable.push.../angular-shared-lib/node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:24)
    at FormErrorComponent.push.../angular-shared-lib/dist/fesm5/mymodule.js.FormErrorComponent.ngOnInit (mymodule.js:738)
    at checkAndUpdateDirectiveInline (core.js:22099)
    at checkAndUpdateNodeInline (core.js:23363)
    at checkAndUpdateNode (core.js:23325)
    at debugCheckAndUpdateNode (core.js:23959)
    at debugCheckDirectivesFn (core.js:23919)

这是我当前使用的代码：

import { combineLatest, Subscription } from 'rxjs';

@Input() control: AbstractControl = new FormControl();

combineLatest(
  this.control.valueChanges.pipe(startWith(null)),
  this.control.statusChanges.pipe(startWith(null)),
).subscribe(() => {
  if (!this.control.valid) {
    this.setErrors();
  } else {
    this.showErrors = false;
  }
})

我也尝试过不使用 startWith 管道，尝试将它们放在一个数组中，我尝试了很多但不断收到 You provided an invalid object 消息。有谁知道为什么 rxjs 不能订阅这些 angular observables？以及如何让它发挥作用？当然，我可以轻松地再次订阅并解决我的问题。但我想把它清理干净，但我很困惑为什么这不起作用。

Answer 1

看来你不需要 combine latest。
也许尝试合并？

merge(
  this.control.valueChanges,
  this.control.statusChanges
).subscribe(_ => {
  if (!this.control.valid) {
    this.setErrors();
  } else {
    this.showErrors = false;
  }
});

Answer 2

正如我在对您的问题的评论中提到的，我认为错误的 observable 来自父组件（并且正是来自您传递给 control 输入的值），这会在运行时导致此错误。

我在这个工作 stackBiltz 上复制了相同的用例，它没有任何问题。

@Input() control: AbstractControl = new FormControl();

ngOnInit() {
  combineLatest([
    this.control.valueChanges,
    this.control.statusChanges
  ]).subscribe(() => {
    if (this.control.valid) {
      console.log('SUCESS');
    } else {
      console.log('ERROR');
    }
  });
}

在 angular 中将来自 valuechanges 和 statuschanges 反应形式的 observables 与 rxjs 结合起来

Combine observables from valuechanges and statuschanges reactive form with rxjs in angular

observable

rxjs

angular

angular-reactive-forms