Angular提交响应式表单后如何获取所有控件错误集合？

当然可行！其实你只需要遍历表单的所有控件，把每个有错误的控件的错误信息整理成你想要的格式就行。我给你几个实用的方案，适配不同的表单结构：

1. 支持嵌套表单的通用方法 #

如果你的表单包含嵌套的FormGroup或者FormArray，可以写一个递归函数来遍历所有层级的控件，收集错误：

getAllFormErrors(formGroup: FormGroup): { [key: string]: any } {
  const errors: { [key: string]: any } = {};

  Object.keys(formGroup.controls).forEach(key => {
    const control = formGroup.controls[key];

    // 只处理无效的控件
    if (control.invalid) {
      errors[key] = control.errors;

      // 递归处理嵌套的FormGroup
      if (control instanceof FormGroup) {
        const nestedErrors = this.getAllFormErrors(control);
        if (Object.keys(nestedErrors).length > 0) {
          errors[key] = { ...errors[key], ...nestedErrors };
        }
      }

      // 处理FormArray中的表单组
      if (control instanceof FormArray) {
        control.controls.forEach((arrayControl, index) => {
          if (arrayControl.invalid && arrayControl instanceof FormGroup) {
            errors[`${key}[${index}]`] = this.getAllFormErrors(arrayControl);
          }
        });
      }
    }
  });

  return errors;
}

用法示例（提交表单时调用）：

onSubmit() {
  // 先标记所有控件为已触摸，确保触发所有验证规则
  this.form.markAllAsTouched();

  if (this.form.invalid) {
    const allErrors = this.getAllFormErrors(this.form);
    console.log(allErrors);
    // 这里就得到了你想要格式的完整错误对象
    return;
  }

  // 表单验证通过，执行提交逻辑
}

2. 平级表单的简化方法 #

如果你的表单没有嵌套结构，只是平级的输入控件，可以用更简洁的代码实现：

getFlatFormErrors(formGroup: FormGroup): { [key: string]: any } {
  return Object.fromEntries(
    Object.entries(formGroup.controls)
      .filter(([_, control]) => control.invalid)
      .map(([key, control]) => [key, control.errors])
  );
}

这个方法利用Object.fromEntries和数组链式调用，一行代码就能完成错误收集，非常清爽。

关键注意点 #

• 一定要先调用markAllAsTouched()：很多验证器（比如默认的required）只会在控件被触摸（touched）或者值变化后才会触发错误状态。提交前标记所有控件为已触摸，能确保你获取到所有应该触发的错误。
• 错误格式完全匹配你的需求：每个控件的键对应其名称，值就是该控件的errors对象，和你给出的示例格式完全一致。

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