Angular中FormArray嵌套FormGroup的验证器失效问题

问题原因 #

Angular 的 FormArray 默认不会自动将子控件的验证状态同步到自身：

• FormArray 的有效性仅由自身设置的验证器决定，默认无任何验证器，所以即使内部子 FormGroup 无效，它依然会显示为 VALID。
• 你直接操作 formGroup.controls.AppAssignments.controls.push() 添加子控件，这种方式绕过了 FormArray 提供的 API，不会触发表单控件树的状态更新和变更检测，导致 FormArray 无法感知子控件的存在及有效性变化。

解决方案 #

1. 给 FormArray 添加自定义验证器，检查子控件有效性

创建验证器函数，遍历 FormArray 的所有子控件，确保它们全部有效：

function formArrayChildValidValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const formArray = control as FormArray;
    // 检查是否存在无效的子 FormGroup
    const hasInvalidChild = formArray.controls.some(group => !group.valid);
    return hasInvalidChild ? { invalidChildren: true } : null;
  };
}

2. 初始化 FormArray 时绑定验证器

修改表单初始化代码，给 AppAssignments 数组添加上述验证器：

formGroup = this.fb.nonNullable.group({
  Name: ['', Validators.required],
  AppAssignments: this.fb.array(
    [] as FormGroup<{
      Name: FormControl<string | null>;
    }>[],
    formArrayChildValidValidator() // 绑定验证器
  ),
});

3. 使用 FormArray 官方 API 操作子控件

封装 getter 简化 FormArray 访问，然后用 push() 方法添加子控件（而非直接操作 controls 数组）：

// 封装 getter，简化 FormArray 的访问
get appAssignmentsArray(): FormArray {
  return this.formGroup.get('AppAssignments') as FormArray;
}

public addAppAssignment() {
  const newAssignmentGroup = this.fb.group({
    Name: new FormControl<string | null>(null, Validators.required),
  });
  // 使用 FormArray 自带的 push 方法，自动触发状态更新
  this.appAssignmentsArray.push(newAssignmentGroup);
  // 无需手动调用 updateValueAndValidity 和 detectChanges，push 会自动处理
}

4. 移除子控件的优化（当前写法可保留）

移除时继续使用 FormArray 的 removeAt() 方法：

public removeAppAssignment() {
  if (this.appAssignmentsArray.length > 0) {
    this.appAssignmentsArray.removeAt(this.appAssignmentsArray.length - 1);
  }
}

效果验证 #

修改后，添加未填写的子控件时，FormArray 会因子控件无效变为 INVALID，进而导致父 FormGroup 无效，提交按钮会自动禁用，符合预期。

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