如何通过编程方式为FormGroup控件追加错误信息？

这个问题我之前开发时也碰到过，Angular的setErrors()方法确实会直接覆盖控件已有的所有错误，不过我们可以通过先获取当前错误对象、合并新错误、再重新设置的方式来实现追加效果，具体操作如下：

1. 基础实现方式 #

假设我们要给username控件追加一个exists错误，可以这么写：

// 1. 获取当前控件的错误对象，若没有错误则用空对象兜底
const currentErrors = this.userForm.controls.username.errors || {};
// 2. 追加新的错误键值对到当前错误对象
currentErrors['exists'] = 'Username already exists';
// 3. 将合并后的错误对象设置回控件
this.userForm.controls.username.setErrors(currentErrors);

这样就能保留控件原本的所有错误，同时新增我们需要的错误信息。

2. 封装成复用方法 #

如果项目中经常需要追加错误，建议封装成一个通用方法，方便重复调用：

import { AbstractControl } from '@angular/forms';

// 在组件或通用工具类中定义方法
addControlError(control: AbstractControl, errorKey: string, errorMessage: string): void {
  const currentErrors = control.errors || {};
  // 可选：避免重复添加相同错误，根据业务需求调整
  if (!currentErrors[errorKey]) {
    currentErrors[errorKey] = errorMessage;
    control.setErrors(currentErrors);
  }
}

调用时只需传入目标控件、错误键和错误信息：

this.addControlError(
  this.userForm.controls.username, 
  'exists', 
  'Username already exists'
);

3. 移除单个错误的补充 #

如果后续需要移除某个特定错误（比如验证通过后清除exists错误），可以用类似的思路：

removeControlError(control: AbstractControl, errorKey: string): void {
  const currentErrors = control.errors;
  if (currentErrors && currentErrors[errorKey]) {
    // 删除指定错误键
    delete currentErrors[errorKey];
    // 若删除后错误对象为空，需设置为null，否则控件会一直处于错误状态
    control.setErrors(Object.keys(currentErrors).length ? currentErrors : null);
  }
}

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