Angular中如何校验动态Form Array内Form Control的有效性？

你遇到的问题是清空filValue输入框时，保存按钮未按预期禁用，核心原因可能是表单状态未正确递归传递，或模板中表单控件的引用方式存在问题，以下是具体修复步骤：

1. 优化FormArray的访问方式 #

在组件类中添加itemRows的getter，避免直接访问invoiceForm.controls.itemRows.controls带来的潜在问题，同时简化模板代码：

get itemRows(): FormArray {
  return this.invoiceForm.get('itemRows') as FormArray;
}

修改模板中的*ngFor循环，使用这个getter：

<div *ngFor="let itemrow of itemRows.controls; let i = index" [formGroupName]="i">

2. 修正未绑定的FormControl问题 #

你的initItemRows中给equat设置了Validators.required，但模板中没有对应表单控件绑定，虽然当前默认值>=让这个控件处于有效状态，但属于不规范写法，可能影响后续表单状态判断。如果equat是固定值，可直接去掉它的必填校验，或添加隐藏控件绑定：

<input type="hidden" formControlName="equat" value=">=" />

3. 强制FormArray校验所有子FormGroup #

默认情况下Angular的FormArray会递归检查子控件有效性，但如果存在状态更新不及时的情况，可给FormArray添加自定义校验器，确保只有所有子FormGroup都有效时，FormArray才处于有效状态：

先定义自定义校验器：

function allItemGroupsValid(control: AbstractControl): ValidationErrors | null {
  const array = control as FormArray;
  const allValid = array.controls.every(group => group.valid);
  return allValid ? null : { hasInvalidGroup: true };
}

创建表单时添加该校验器：

this.invoiceForm = this.builder.group({
  itemRows: this.builder.array([this.initItemRows()], [
    Validators.required,
    allItemGroupsValid
  ])
});

4. 验证控件状态 #

可在模板中临时添加状态显示，确认filValue和整个表单的状态变化：

<!-- 显示当前filValue的状态 -->
{{itemrow.get('filValue').status}}
<!-- 显示整个表单的状态 -->
{{invoiceForm.status}}

清空filValue时，filValue的状态应变为INVALID，整个invoiceForm的状态也会变为INVALID，此时保存按钮会自动禁用。

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