Angular自定义表单控件如何在自身模板中显示错误信息

核心方案：注入NgControl #

在你的MultiSelectComponent中通过构造函数注入NgControl，这是官方推荐的标准方式，能直接获取当前控件的AbstractControl实例，进而拿到errors属性。

步骤1：注入NgControl #

修改组件构造函数：

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

constructor(private ngControl: NgControl) {
  super(); // 调用父类构造函数
}

注：由于你已在组件providers中注册了NG_VALIDATORS和NG_VALUE_ACCESSOR，注入NgControl不会触发循环依赖。

步骤2：在模板中访问错误信息 #

直接在组件模板里通过ngControl.control.errors获取错误对象，示例：

<div *ngIf="ngControl.control.invalid && (ngControl.control.dirty || ngControl.control.touched)" class="error-tip">
  <span *ngIf="ngControl.control.errors?.required">请选择至少一项</span>
  <span *ngIf="ngControl.control.errors?.customValidate">自定义错误提示内容</span>
</div>

为什么这是最佳实践？ #

• 契合Angular表单控件设计逻辑：NgControl是表单控件的核心控制器，封装了控件的所有状态（valid、invalid、dirty等）与错误信息。
• 无需维护额外内部状态：直接复用Angular表单的内置状态，避免手动同步控件状态的繁琐与潜在的不一致问题。
• 全场景兼容：无论使用模板驱动表单还是响应式表单，该方式都能正常工作。

不推荐的替代方案 #

若不想注入NgControl，也可在组件内部维护errors变量，在validate方法中更新：

private _errors: ValidationErrors | null = null;

validate(control: AbstractControl): ValidationErrors | null {
  // 你的验证逻辑
  const errors = ...;
  this._errors = errors;
  return errors;
}

随后在模板中使用_errors，但这种方式需要手动同步控件的dirty、touched等状态，易出现状态不一致问题，因此不推荐。

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