Angular监听FormArray内表单控件valueChanges报错的解决咨询

错误原因 #

你报错的核心问题是：birthDateChild并不是顶层表单this.form的直接控件，它属于你刚创建的子表单组，而你错误地从顶层表单控件里去获取它，自然会得到undefined，调用valueChanges就会抛出异常。

修复代码 #

直接通过刚创建的子表单组来获取birthDateChild控件并监听其变化，同时记得在组件销毁时取消订阅，避免内存泄漏：

// 先在组件里定义数组保存订阅对象，用于销毁时清理
private childDateSubscriptions: Subscription[] = [];

public addChild(addNewBlock: boolean = false): void {
  // Do some stuff....
  const child = this.formBuilder.group({
    firstNameChild: [null, [Validators.required, Validators.pattern(RegexUtils.identityRegex)]],
    birthDateChild: ['', [Validators.required, reqDateBeforeToday]]
  });
  this.children.push(child);

  // 直接从子表单组获取birthDateChild控件并监听变化
  const dateControl = child.get('birthDateChild');
  if (dateControl) {
    const subscription = dateControl.valueChanges.pipe(debounceTime(1000))
      .subscribe(data => {
        console.log(data);
        // 在这里添加错误提示逻辑，比如检查控件状态
        if (dateControl.invalid) {
          // 处理错误提示逻辑
        }
      });
    this.childDateSubscriptions.push(subscription);
  }

// Do some stuff....
}

// 组件销毁时清理所有订阅
ngOnDestroy(): void {
  this.childDateSubscriptions.forEach(sub => sub.unsubscribe());
}

另一种方式：从FormArray中获取刚添加的子表单 #

如果你不想直接用创建的child变量，也可以从children这个FormArray中拿到最后一个元素（也就是刚添加的子表单）来获取控件：

const lastChild = this.children.at(this.children.length - 1);
const dateControl = lastChild.get('birthDateChild');
if (dateControl) {
  // 后续订阅逻辑同上
}

额外提示 #

如果需要监听所有子表单的birthDateChild变化，也可以直接监听整个children FormArray的valueChanges，不过这种方式会在任何子表单字段变化时触发，需要自行过滤处理：

this.children.valueChanges.pipe(debounceTime(1000))
  .subscribe(childrenData => {
    // childrenData是所有子表单的数据数组，遍历检查每个birthDateChild的状态
    childrenData.forEach((childData, index) => {
      const childControl = this.children.at(index);
      const dateControl = childControl.get('birthDateChild');
      if (dateControl?.invalid) {
        // 处理对应子表单的错误
      }
    });
  });

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