如何从Angular的FormArray中定位带错误的特定表单控件？

一、解决FormArray.errors为空的问题 #

FormArray本身不会自动汇总子控件的错误，因为它默认没有绑定验证器。你可以给FormArray添加自定义验证器，让它的errors属性能反映子控件的状态：

ngOnInit() {
  this.a = new FormControl('', [Validators.required]);
  this.b = new FormControl('', [Validators.required]);

  // 给FormArray添加自定义验证器
  this.array = new FormArray([this.a, this.b], {
    validators: this.checkChildControlsValidity
  });

  this.array.statusChanges.subscribe((status: FormControlStatus) => {
    if (status === 'invalid') {
      // 此时this.array.errors会包含自定义错误标识
      this.setErrorMessage();
    }
  });
}

// 自定义验证器：检查是否有子控件无效
checkChildControlsValidity(control: FormArray): ValidationErrors | null {
  const hasInvalidControls = control.controls.some(item => item.invalid);
  return hasInvalidControls ? { hasInvalid: true } : null;
}

这样当子控件无效时，FormArray的errors会存在{ hasInvalid: true }，你可以基于此触发后续的错误提示逻辑。

二、给FormControl添加标识信息（模拟name属性） #

Angular原生FormControl没有name属性，但有两种标准方式解决标识问题：

方式1：改用FormGroup（推荐） #

FormGroup是Angular表单中管理带命名控件的标准方案，每个控件通过key作为标识，天然满足你的需求：

组件类代码：

import { FormGroup, FormControl, Validators, FormControlStatus } from '@angular/forms';

// ...

formGroup: FormGroup;
errorMessage: string;

ngOnInit() {
  this.formGroup = new FormGroup({
    a: new FormControl('', [Validators.required]),
    b: new FormControl('', [Validators.required])
  });

  this.formGroup.statusChanges.subscribe((status: FormControlStatus) => {
    if (status === 'invalid') {
      this.setErrorMessage();
    }
  });
}

setErrorMessage() {
  // 遍历FormGroup的控件，找到第一个必填项错误的控件
  const invalidEntry = Object.entries(this.formGroup.controls).find(([key, control]) => 
    control.hasError('required')
  );
  
  if (invalidEntry) {
    this.errorMessage = `${invalidEntry[0]} is required`;
  }
}

模板代码：

<form [formGroup]="formGroup">
  <input formControlName="a" matInput />
  <input formControlName="b" matInput />
</form>
<p class="error" *ngIf="errorMessage">{{ errorMessage }}</p>

方式2：给FormControl绑定自定义标识（保留FormArray） #

如果必须使用FormArray，可以通过映射关系保存控件与标识的对应关系：

array: FormArray;
errorMessage: string;
// 用Map保存FormControl到名称的映射
controlNameMap: Map<FormControl, string> = new Map();

ngOnInit() {
  const aControl = new FormControl('', [Validators.required]);
  const bControl = new FormControl('', [Validators.required]);

  this.controlNameMap.set(aControl, 'a');
  this.controlNameMap.set(bControl, 'b');

  this.array = new FormArray([aControl, bControl]);

  this.array.statusChanges.subscribe((status: FormControlStatus) => {
    if (status === 'invalid') {
      this.setErrorMessage();
    }
  });
}

setErrorMessage() {
  const invalidControl = this.array.controls.find(control => control.hasError('required')) as FormControl;
  if (invalidControl) {
    const controlName = this.controlNameMap.get(invalidControl);
    this.errorMessage = `${controlName} is required`;
  }
}

这种方式避免了类型断言的不规范写法，通过独立的映射表维护控件标识。

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