Angular表单控件：如何根据触发的验证器获取对应错误文本

核心思路是通过包装验证器函数，给每个验证器绑定唯一的错误标识key，同时维护错误key与errorText的映射关系，这样就能在表单验证失败时，根据触发的错误key匹配到对应的错误文本。

步骤1：修改组件逻辑，添加错误映射与验证器包装 #

在组件中新增错误映射表，并在构建表单时对每个ValidatorItem的验证器进行包装：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { FormBuilder, FormGroup, Validators, AbstractControl, ValidationErrors } from '@angular/forms';
import { ValidatorItem } from './your-path'; // 替换为实际文件路径

@Component({
  selector: 'app-your-input-component',
  templateUrl: './your-input-component.component.html'
})
export class YourInputComponent implements OnChanges {
  @Input() validators: ValidatorItem[] = [];
  formModel!: FormGroup;
  private errorMap: { [key: string]: string } = {};

  constructor(private formBuilder: FormBuilder) {}

  ngOnChanges(changes: SimpleChanges): void {
    if ('validators' in changes) {
      this.errorMap = {};
      // 包装每个验证器，绑定唯一错误key并建立映射
      const wrappedValidators = this.validators.map((item, index) => {
        const errorKey = `validator_${index}`;
        this.errorMap[errorKey] = item.errorText;

        // 包装验证器函数，返回带自定义key的错误对象
        return (control: AbstractControl): ValidationErrors | null => {
          const validationResult = item.validator(control);
          return validationResult ? { [errorKey]: true } : null;
        };
      });

      this.formModel = this.formBuilder.group({
        value: ['', Validators.compose(wrappedValidators)],
      });
    }
  }
}

步骤2：添加获取错误文本的方法 #

在组件中实现方法，用于从错误映射表中匹配当前触发的错误文本：

// 获取单个错误文本（适用于只显示第一个触发的错误）
getCurrentErrorText(): string | null {
  const control = this.formModel.get('value');
  if (!control || !control.errors) return null;

  for (const key in this.errorMap) {
    if (control.errors[key]) {
      return this.errorMap[key];
    }
  }
  return null;
}

// 获取所有触发的错误文本（适用于显示多个错误）
getCurrentErrorTexts(): string[] {
  const control = this.formModel.get('value');
  if (!control || !control.errors) return [];

  const errorTexts: string[] = [];
  for (const key in this.errorMap) {
    if (control.errors[key]) {
      errorTexts.push(this.errorMap[key]);
    }
  }
  return errorTexts;
}

步骤3：模板中使用错误文本 #

根据需求在模板中调用对应的方法显示错误：

<!-- 显示单个错误 -->
<div *ngIf="formModel.get('value')?.invalid && formModel.get('value')?.touched" class="error-text">
  {{ getCurrentErrorText() }}
</div>

<!-- 显示多个错误 -->
<div *ngIf="formModel.get('value')?.invalid && formModel.get('value')?.touched" class="error-list">
  <div *ngFor="let text of getCurrentErrorTexts()">{{ text }}</div>
</div>

原理说明 #

• 包装验证器时，给每个验证器分配唯一的错误key，并将key与errorText存入errorMap；
• 验证器执行后，返回包含该自定义key的错误对象，替代原验证器的默认错误标识；
• 当表单控件触发错误时，通过遍历errorMap匹配错误key，即可拿到对应的错误文本。

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