Angular中如何查找FormArray内包含校验错误的表单项索引

核心思路 #

• 基于Angular表单的公共父类AbstractControl做递归深度遍历，兼容FormControl/FormGroup/FormArray三种表单类型
• 遍历FormArray时严格按照索引升序校验，找到第一个存在校验错误的子项后立即返回对应索引，避免多余遍历
• 嵌套结构会逐层向下校验，只要子项任意深度存在错误，都会被识别为当前索引对应的表单项无效

完整实现代码 #

import { AbstractControl, FormArray, FormGroup } from '@angular/forms';

/**
 * 查找FormArray中第一个存在校验错误的子项索引
 * @param form 要校验的表单控件，支持嵌套结构
 * @returns 第一个错误项的索引，表单完全有效时返回-1
 */
function findFirstInvalidIndex(form: AbstractControl): number {
  // 处理FormControl
  if (!(form instanceof FormGroup) && !(form instanceof FormArray)) {
    return form.invalid ? 0 : -1;
  }

  // 处理FormGroup
  if (form instanceof FormGroup) {
    for (const control of Object.values(form.controls)) {
      const hasError = findFirstInvalidIndex(control) !== -1;
      if (hasError) return 0;
    }
    return -1;
  }

  // 处理FormArray核心逻辑
  if (form instanceof FormArray) {
    for (let i = 0; i < form.length; i++) {
      const control = form.at(i);
      const hasError = findFirstInvalidIndex(control) !== -1;
      if (hasError) return i;
    }
  }

  return -1;
}

使用示例 #

对于你给出的场景，直接调用方法即可得到结果：

// 你的FormArray实例
const slides: FormArray = /* 你的表单实例 */;

const firstErrorIndex = findFirstInvalidIndex(slides);
console.log(firstErrorIndex); // 输出示例中的2

可选扩展 #

如果需要获取嵌套结构的完整错误路径（比如[2, 'name']表示索引为2的子项的name字段出错），可以修改返回值为路径数组：

function findFirstInvalidPath(form: AbstractControl, path: Array<string | number> = []): Array<string | number> | null {
  if (!(form instanceof FormGroup) && !(form instanceof FormArray)) {
    return form.invalid ? path : null;
  }

  if (form instanceof FormGroup) {
    for (const [key, control] of Object.entries(form.controls)) {
      const res = findFirstInvalidPath(control, [...path, key]);
      if (res) return res;
    }
    return null;
  }

  if (form instanceof FormArray) {
    for (let i = 0; i < form.length; i++) {
      const control = form.at(i);
      const res = findFirstInvalidPath(control, [...path, i]);
      if (res) return res;
    }
  }

  return null;
}

调用后返回示例：[2, 'name']，可以直接用来定位到具体出错的控件。

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