Angular中如何订阅FormArray内指定表单字段的值变化

• 报错Cannot read properties of undefined (reading 'valueChanges')是因为FormArray中的每一项是FormGroup实例，直接通过control['calls']无法获取到组内的表单控件，返回值为undefined，自然访问不到valueChanges属性。
• 无限循环是因为在valueChanges的回调函数中更新表单值时，默认会触发新的值变化事件，反复执行订阅回调导致死循环。

直接在构建FormArray每一行的FormGroup时，针对需要监听的字段绑定订阅，不需要二次遍历整个controlArray，逻辑更稳妥：

buildForm() {
  const controlArray = this.testForm.get('formArrayName') as FormArray;

  Object.keys(this.options).forEach((i) => {
    // 先创建单行的FormGroup实例
    const rowGroup = this.FormBuilder.group({
      id_agent : [this.options[i].ID , Validators.required] ,
      calls :  [0] ,
      CA : { value: 0, disabled: true } ,
      RPC : { value: 0, disabled: true } ,
      CR : { value: 0, disabled: true } ,
      ACU : { value: 0, disabled: true } ,
      CB : [0] ,
      RP : [0] ,
      NGT : { value: 0, disabled: true } ,
      sells : { value: 0, disabled: true } ,
      week : ['' , Validators.required] ,
    });
    controlArray.push(rowGroup);

    // 列出所有需要监听值变化的字段，不需要监听的不要加
    const needSubscribeFields = ['calls', 'CB', 'RP'];
    needSubscribeFields.forEach(fieldName => {
      // 通过get方法安全获取组内控件，再绑定订阅
      rowGroup.get(fieldName)?.valueChanges.subscribe(newValue => {
        // 在这里写你的字段自动计算逻辑，先统一取数转数值避免NaN
        const calls = Number(rowGroup.get('calls')?.value || 0);
        const cb = Number(rowGroup.get('CB')?.value || 0);
        const rp = Number(rowGroup.get('RP')?.value || 0);

        // 按业务公式计算各只读字段值，以下为示例，替换成你自己的计算规则
        const calcCA = calls * 12;
        const calcRPC = calls === 0 ? 0 : rp / calls;
        const calcSells = cb * 0.2;

        // 更新计算字段时必须加emitEvent: false，阻止这次更新触发新的值变化事件，从根源避免无限循环
        rowGroup.patchValue({
          CA: calcCA,
          RPC: calcRPC,
          sells: calcSells
          // 其他计算字段按规则补充
        }, { emitEvent: false });
      })
    })
  });  
}

• 不要通过方括号索引属性的方式获取FormGroup内的控件，统一用get('字段名')方法，类型安全，不会出现undefined报错。
• 如果后续有动态新增FormArray行的需求，把「创建单行FormGroup+绑定字段订阅」的逻辑抽成独立公共方法，新增行时直接调用即可，不会出现新增行没有绑定监听的问题。
• 订阅要在组件销毁时手动取消，避免内存泄漏，可以结合RxJS的takeUntil操作符绑定组件销毁主题实现自动取消。
• 所有在valueChanges回调内部执行的setValue/patchValue操作，只要不需要联动触发其他订阅，都要加上{emitEvent: false}配置。

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