Angular中RxJS动态FormGroup值变更订阅的优化管理咨询

业务场景：存在包含FormArray的表单，可动态添加FormGroup（每个包含4个FormControl），任意项可随时删除。需要为每个新增FormGroup的4个字段valueChanges创建订阅，并在订阅中调用Web服务。

当前订阅实现代码：

createMultiSubscriber(index: number) {
  const getProductsObs$ = merge(
    this.secondaryHolders.controls[index]
      .get('typeDoc')
      .valueChanges.pipe(
        tap((docType) => this.handlerMultiDocType(docType, index))
      ),
    this.secondaryHolders.controls[index].get('document').valueChanges,
    this.secondaryHolders.controls[index].get('email').valueChanges,
    this.secondaryHolders.controls[index].get('expeditionCountry')
      .valueChanges
  )
    .pipe(
      debounceTime(500),
      distinctUntilChanged(),
      switchMap((value) => {
        if (
          this.secondaryHolders.controls[index].get('document').valid &&
          this.secondaryHolders.controls[index].get('typeDoc').valid &&
          this.secondaryHolders.controls[index].get('email').valid &&
          !this.secondaryHolders.controls[index].get('expeditionCountry')
            .invalid
        ) {
          this.isLoadingOtherProducts = true;
          return EMPTY;
        } else {
          this.isLoadingOtherProducts = false;
          return EMPTY;
        }
      })
    )
    .subscribe((response) => {
      this.isLoadingOtherProducts = false;
    });
  this.titularSubscribers.push(getProductsObs$);
}

删除实现代码：

deleteHolder(index: number): void {
  this.secondaryHolders.removeAt(index);
  this.titularSubscribers[index].unsubscribe();
}

遇到的问题：删除非末尾索引的FormGroup后，操作其他已存在的FormGroup会报错（错误提示：Cannot read properties of undefined (reading 'controls')）。

需求：寻求更优的多FormGroup订阅/取消订阅管理方案。

1. 用Map关联FormGroup与订阅，避免索引依赖 #

问题核心是删除非末尾项后，titularSubscribers数组索引与secondaryHolders控件索引不再匹配，导致后续操作访问错误对象。改用Map存储FormGroup和对应订阅的映射关系：

// 替换原titularSubscribers数组为Map
private holderSubscriptions = new Map<FormGroup, Subscription>();

// 创建订阅时直接关联目标FormGroup
createMultiSubscriber(group: FormGroup) {
  const getProductsObs$ = merge(
    group.get('typeDoc').valueChanges.pipe(
      tap((docType) => {
        // 通过FormGroup在数组中的位置获取索引
        const index = this.secondaryHolders.controls.indexOf(group);
        this.handlerMultiDocType(docType, index);
      })
    ),
    group.get('document').valueChanges,
    group.get('email').valueChanges,
    group.get('expeditionCountry').valueChanges
  )
  .pipe(
    debounceTime(500),
    distinctUntilChanged(),
    switchMap(() => {
      if (
        group.get('document').valid &&
        group.get('typeDoc').valid &&
        group.get('email').valid &&
        !group.get('expeditionCountry').invalid
      ) {
        this.isLoadingOtherProducts = true;
      } else {
        this.isLoadingOtherProducts = false;
      }
      return EMPTY;
    })
  )
  .subscribe(() => {
    this.isLoadingOtherProducts = false;
  });

  this.holderSubscriptions.set(group, getProductsObs$);
}

// 删除时通过FormGroup获取订阅并取消
deleteHolder(index: number): void {
  const targetGroup = this.secondaryHolders.controls[index];
  const subscription = this.holderSubscriptions.get(targetGroup);
  
  if (subscription) {
    subscription.unsubscribe();
    this.holderSubscriptions.delete(targetGroup);
  }
  this.secondaryHolders.removeAt(index);
}

2. 结合takeUntil实现订阅自动兜底取消 #

在组件中定义销毁主题，所有订阅通过takeUntil管道绑定，组件销毁时自动取消所有订阅，避免手动管理遗漏：

private destroy$ = new Subject<void>();

// 创建订阅时添加takeUntil管道
createMultiSubscriber(group: FormGroup) {
  merge(
    // 同上述控件valueChanges逻辑
  ).pipe(
    // 其他操作符
    takeUntil(this.destroy$)
  ).subscribe();
}

// 组件销毁时触发取消所有订阅
ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

3. 可选优化：监听整个FormArray的变化 #

如果不需要单独处理单个控件的即时变化，可直接监听FormArray的valueChanges，减少订阅数量：

ngOnInit() {
  this.secondaryHolders.valueChanges.pipe(
    debounceTime(500),
    distinctUntilChanged(),
    switchMap((groups) => {
      // 按需检查每个group的有效性
      const isValid = groups.some(g => 
        g.document && g.typeDoc && g.email && g.expeditionCountry
      );
      this.isLoadingOtherProducts = isValid;
      return EMPTY;
    })
  ).subscribe();
}

内容的提问来源于stack exchange，提问作者AlfreP25