Angular用RxJS combineLatest合并表单valueChanges与statusChanges报错如何解决

1. 缺少操作符导入：代码中使用了startWith管道操作符，但没有从rxjs/operators中导入该操作符，导致管道返回值不是合法的Observable对象，触发类型错误。
2. 订阅时机错误：如果combineLatest相关代码写在组件的constructor中而非ngOnInit生命周期钩子中，此时@Input()传入的control还未被父组件完成赋值，可能出现this.control.valueChanges/this.control.statusChanges为undefined的情况。
3. 业务场景适配问题：你当前的需求是任意一个事件触发就执行逻辑，不需要同时获取两个可观察对象的最新值，用combineLatest不符合场景适配要求，也更容易触发参数校验问题。

基础实现（推荐） #

优先使用merge操作符实现多Observable合并触发逻辑，更贴合你的业务需求：

// 导入必要依赖
import { merge, Subscription } from 'rxjs';
import { startWith } from 'rxjs/operators';
import { AbstractControl, FormControl } from '@angular/forms';

// 组件内代码
@Input() control: AbstractControl = new FormControl();
private controlSub: Subscription;

ngOnInit(): void {
  // 必须放在ngOnInit中执行，确保@Input的control已经完成赋值
  this.controlSub = merge(
    this.control.valueChanges.pipe(startWith(this.control.value)),
    this.control.statusChanges.pipe(startWith(this.control.status))
  ).subscribe(() => {
    if (!this.control.valid) {
      this.setErrors();
    } else {
      this.showErrors = false;
    }
  })
}

// 组件销毁时取消订阅，避免内存泄漏
ngOnDestroy(): void {
  this.controlSub?.unsubscribe();
}

兼容异步传值的实现 #

如果父组件传入control的时机晚于ngOnInit触发，可改用@Input setter监听赋值：

private controlSub: Subscription;

@Input() set control(ctrl: AbstractControl) {
  // 销毁之前的旧订阅，避免内存泄漏
  this.controlSub?.unsubscribe();
  if (ctrl) {
    this.controlSub = merge(
      ctrl.valueChanges.pipe(startWith(ctrl.value)),
      ctrl.statusChanges.pipe(startWith(ctrl.status))
    ).subscribe(() => {
      if (!ctrl.valid) {
        this.setErrors();
      } else {
        this.showErrors = false;
      }
    })
  }
}

排查验证 #

如果修改后仍然报错，可先在ngOnInit中打印两个可观察对象确认合法性：

ngOnInit() {
  console.log(this.control.valueChanges); // 需输出Observable类型对象
  console.log(this.control.statusChanges); // 需输出Observable类型对象
}

内容的提问来源于stack exchange，提问作者Sjoerd de Wit