Angular中FormArray内FormGroup无效，为何FormArray与外层FormGroup仍有效？

这个问题我之前也踩过坑，核心原因是你直接操作FormArray的controls数组来添加控件，而没有使用FormArray官方提供的push()方法，导致表单系统没有触发状态更新，无法感知新增控件的验证状态。

具体分析 #

Angular的FormArray是一个抽象控件，它内部维护着控件集合和状态管理逻辑。当你直接修改this.emailFormArray.controls.push(...)时，只是在数组层面添加了控件，但FormArray本身并没有收到“新增控件”的通知，因此它的验证状态（包括valid）仍然停留在初始值——因为初始时FormArray是空的，没有子控件，所以valid为true，外层FormGroup的valid也会随之保持true，哪怕内部子控件已经无效。

而你在模板中看到的内部FormGroup和email控件的valid为false，是因为这些控件自身的验证逻辑正常工作，但它们的状态没有向上传递到FormArray和外层FormGroup。

修复代码 #

只需要把添加控件的方式从直接操作controls数组，改成调用FormArray的push()方法即可：

public addEmailFormGroup() {
  // 替换掉直接操作controls数组的写法
  this.emailFormArray.push(
    this.formBuilder.group({
      email: ['', Validators.email],
    }),
  );
}

为什么这样有效？ #

FormArray的push()方法是Angular表单系统提供的API，它在添加控件的同时，会自动触发表单的状态变更检测，更新FormArray自身的验证状态，并且把这种状态变化向上传递给外层的FormGroup。这样一来，当内部的email控件验证失败时，FormArray和外层FormGroup的valid就会正确地变成false，符合你的预期。

额外提示 #

不仅是添加控件，动态删除FormArray中的控件时，也要使用removeAt(index)方法，而不是直接对controls数组做splice操作，否则同样会出现状态不更新的问题。

内容的提问来源于stack exchange，提问作者鸿则_