将valuechanges和statuschanges响应式表单中的可观察对象与angular中的rxjs结合起来.&l

Question

我试图将valueChanges和statusChanges合并到一个订阅中，因为我想在2个更改中的任何一个更改时执行一些逻辑。

我正试图使用combineLatest，它应该在一个可观察对象得到更新时立即启动。我遇到的问题是rxjs给我一个警告，valueChanges和statusChanges是不可订阅的。

this.control是一个有角的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可观察对象吗?如何让它发挥作用?当然，我可以很容易地再次订阅，并解决我的问题。但是我想把它做干净，我很困惑为什么这不起作用。

Answer 1

正如我在对你的问题的评论中提到的，我认为错误的可观察对象来自父组件(并确切地来自你传递给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');
}
});
}

Answer 2

看起来不需要合并最新的。
也许可以尝试合并?

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