Angular 5响应式表单中FormArray的valueChanges事件未触发

嗨，我来帮你搞定这个问题！FormArray的valueChanges其实是可以正常触发的，大概率是订阅的方式或者时机不对，我给你整理几种靠谱的解决思路：

1. 直接订阅整个FormArray的变化 #

首先你可以先给FormArray写个便捷的getter，方便后续获取：

// 定义getter快速获取FormArray
get applicationPenalties(): FormArray {
  return this.ApplicationForm.get('ApplicationPenalties') as FormArray;
}

然后在组件的ngOnInit里订阅它的valueChanges：

ngOnInit() {
  // 订阅整个FormArray的变化
  this.applicationPenalties.valueChanges.subscribe(updatedValues => {
    console.log("FormArray整体值变化啦：", updatedValues);
    // 这里写你的业务逻辑就好
  });
}

这样不管是数组里单个控件的值变化，还是数组的长度变化（添加/删除控件），这个订阅都会触发。

2. 订阅FormArray里单个控件的变化 #

如果需要监听数组里每个单独表单组的变化，有两种方式：

方式一：创建控件时直接订阅 #

修改你的preparePenaltyDetails方法，在返回FormGroup前就订阅它的valueChanges：

preparePenaltyDetails(): FormGroup {
  const penaltyGroup = this.fb.group({
    Id: '',
    ApplicationId: '',
    RevisionNo: '',
    PenaltyMwh: ''
    // 其他你需要的控件
  });

  // 订阅当前这个表单组的变化
  penaltyGroup.valueChanges.subscribe(penaltyChanges => {
    console.log("单个 penalty 控件更新：", penaltyChanges);
    // 处理单个控件的业务逻辑
  });

  return penaltyGroup;
}

方式二：动态添加控件后订阅 #

如果是后续动态添加控件，也可以在添加时给新控件单独订阅：

// 动态添加penalty控件的方法
addNewPenalty() {
  const newPenaltyGroup = this.preparePenaltyDetails();
  this.applicationPenalties.push(newPenaltyGroup);
  
  // 给新添加的控件单独订阅（如果preparePenaltyDetails里没订阅的话）
  newPenaltyGroup.valueChanges.subscribe(changes => {
    console.log("新添加的penalty控件变化：", changes);
  });
}

要注意的坑点 #

• 一定要确保订阅是在FormArray创建完成之后执行，如果在组件初始化时FormArray还没创建好，订阅会绑定到undefined上，自然不会触发。
• 记得在组件销毁时取消订阅，避免内存泄漏，用RxJS的takeUntil就很方便：

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

// 定义一个销毁信号
private destroy$ = new Subject<void>();

ngOnInit() {
  this.applicationPenalties.valueChanges
    .pipe(takeUntil(this.destroy$)) // 组件销毁时自动取消订阅
    .subscribe(updatedValues => {
      // 你的业务逻辑
    });
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

你可以先试试第一种订阅整个FormArray的方式，要是还是没触发，检查下有没有重新给ApplicationPenalties赋值过——如果重新赋值了，之前的订阅就失效了，需要重新订阅哦。

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