Angular表单错误消息显示异常：无法正常显示或消失

问题现象 #

• 在ngOnInit中监听formGroup.valueChanges并调用removeTooltips()时，错误消息完全无法显示
• 移除该监听代码后，错误消息能正常显示，但用户修正输入后，错误提示无法自动消失

代码问题分析 #

从提供的代码来看，核心问题出在错误提示的控制逻辑不匹配：

1. 控制提示显示的条件是errorFormControl.includes(userFormProperties.FIRST_NAME)，但removeTooltips()仅清空了this.firstName数组，完全未修改errorFormControl——原监听触发过于频繁，导致错误状态刚被设置就被清空，因此提示根本无法显示。
2. 移除监听后，errorFormControl中的错误项没有被任何逻辑移除，用户修正输入后，提示依然不会消失。

修复方案 #

方案1：修正removeTooltips()方法，操作正确的控制数组 #

修改removeTooltips()，让它真正更新控制提示显示的errorFormControl数组：

removeTooltips(): void {
  console.log("removeTooltips");
  // 移除对应的错误控制项
  const errorIndex = this.errorFormControl.indexOf(userFormProperties.FIRST_NAME);
  if (errorIndex > -1) {
    this.errorFormControl.splice(errorIndex, 1);
  }
  // 清空错误消息数组
  this.firstName = [];
}

方案2：优化监听逻辑，根据控件校验状态动态更新提示 #

不要在全局valueChanges中盲目移除提示，而是监听单个控件的校验状态变化，精准控制提示的显示/隐藏：

// 在ngOnInit中替换原监听逻辑
this.formGroup.get('firstName')?.statusChanges.pipe(takeUntil(this.destroy$)).subscribe(status => {
  const firstNameKey = userFormProperties.FIRST_NAME;
  if (status === 'VALID') {
    // 校验通过时移除错误提示
    const index = this.errorFormControl.indexOf(firstNameKey);
    if (index > -1) {
      this.errorFormControl.splice(index, 1);
    }
    this.firstName = [];
  } else if (status === 'INVALID') {
    // 校验失败时添加错误提示（避免重复添加）
    if (!this.errorFormControl.includes(firstNameKey)) {
      this.errorFormControl.push(firstNameKey);
    }
    // 设置对应错误消息（替换为实际的错误提示key）
    this.firstName = ['user.form.error.firstName.required'];
  }
});

补充：确保错误消息关联正确 #

如果firstNameErrorMessage是计算属性，确保它和this.firstName数组关联，比如：

get firstNameErrorMessage(): string {
  return this.firstName.join('');
}

总结 #

原代码的核心问题是错误提示的触发条件和清除逻辑不匹配，调整后让控制提示显示的数组和错误消息数组同步更新，并根据控件的实际校验状态触发逻辑，就能实现错误提示正常显示和自动消失的效果。

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