如何在mat-error内容溢出时显示错误计数而非完整错误列表

我完全理解你遇到的困扰——当mat-error里的错误消息过多时，不仅会垂直溢出，还会和下方的输入组件重叠，严重影响页面布局和用户体验。下面是一套简洁优雅的实现方案，能自动在内容溢出时切换为错误计数（比如“Errors (2)”），hover时展示完整错误列表，同时优化样式让提示更清晰：

实现思路 #

核心思路是：

1. 检测mat-error容器是否垂直溢出
2. 根据溢出状态切换显示错误计数或完整错误列表
3. 使用Tooltip在hover时展示完整错误详情
4. 优化mat-error的样式（包括透明度/背景）提升可读性

完整代码实现 #

1. 修改模板（mat-error部分）

把你原来的mat-error替换为以下代码，增加溢出检测引用、状态切换逻辑和Tooltip：

<mat-error #errorContainer class="error-container" *ngIf="control.formControl.errors">
  <!-- 溢出时显示错误计数，hover展示详情 -->
  <ng-container *ngIf="showErrorSummary; else fullErrorList">
    <span 
      matTooltipClass="custom-error-tooltip"
      [matTooltip]="fullErrorTooltip"
      class="error-summary"
    >
      Errors ({{ errorCount }})
    </span>
  </ng-container>

  <!-- 未溢出时显示完整错误列表 -->
  <ng-template #fullErrorList>
    <ng-container *ngFor="let errorKey of errorKeys(control.formControl.errors)">
      <span 
        [ngClass]="{ 'error-text': errorKey === 'differentFromOriginal' }"
      >
        {{ FORM_ERRORS[errorKey] | translate }}
      </span>
    </ng-container>
  </ng-template>

  <!-- Tooltip中展示的完整错误内容模板 -->
  <ng-template #fullErrorTooltip>
    <div class="tooltip-error-list">
      <ng-container *ngFor="let errorKey of errorKeys(control.formControl.errors)">
        <span>
          {{ FORM_ERRORS[errorKey] | translate }}
        </span>
      </ng-container>
    </div>
  </ng-template>
</mat-error>

2. 组件类逻辑（溢出检测）

在你的组件类中添加以下代码，用于检测mat-error是否溢出，并更新显示状态：

import { Component, ViewChild, ElementRef, AfterViewChecked, ChangeDetectorRef } from '@angular/core';
// 确保导入你的FORM_ERRORS和其他依赖

@Component({
  selector: 'your-form-component',
  templateUrl: './your-form.component.html',
  styleUrls: ['./your-form.component.scss']
})
export class YourFormComponent implements AfterViewChecked {
  @ViewChild('errorContainer') errorContainer!: ElementRef<HTMLElement>;
  showErrorSummary = false;
  errorCount = 0;

  constructor(private cdr: ChangeDetectorRef) {}

  // 你的原有方法：获取错误键数组
  errorKeys(errors: any): string[] {
    return errors ? Object.keys(errors) : [];
  }

  // 每次视图更新后检测溢出状态
  ngAfterViewChecked(): void {
    this.checkErrorOverflow();
  }

  private checkErrorOverflow(): void {
    // 如果没有错误或容器未初始化，直接返回
    if (!this.control?.formControl?.errors || !this.errorContainer) return;

    const errorElement = this.errorContainer.nativeElement;
    this.errorCount = this.errorKeys(this.control.formControl.errors).length;

    // 检测是否垂直溢出：scrollHeight > clientHeight 表示内容超出容器高度
    const isOverflowing = errorElement.scrollHeight > errorElement.clientHeight;
    this.showErrorSummary = isOverflowing;

    // 手动触发变更检测，避免ExpressionChangedAfterItHasBeenCheckedError
    this.cdr.detectChanges();
  }
}

3. 样式优化（SCSS）

添加以下样式，控制mat-error的溢出行为、Tooltip外观，并提升错误区域的透明度：

.error-container {
  // 设置最大高度，超过则触发溢出检测
  max-height: 40px;
  overflow: hidden;
  // 增加白色背景并设置高透明度，避免和下方组件重叠时模糊
  background: rgba(255, 255, 255, 0.98);
  padding: 4px 0;
}

.error-text {
  display: block;
  margin: 2px 0;
  color: #f44336;
}

.error-summary {
  cursor: help;
  text-decoration: underline;
  color: #f44336;
}

// 自定义Tooltip样式
::ng-deep .custom-error-tooltip {
  background-color: #f44336 !important;
  color: white !important;
  max-width: 320px;
  padding: 10px 14px;
  font-size: 14px;
}

::ng-deep .custom-error-tooltip .tooltip-error-list span {
  display: block;
  margin: 3px 0;
}

关键细节说明 #

1. 溢出检测时机：使用ngAfterViewChecked钩子，每次视图更新后重新检测溢出状态，确保错误变化、组件状态变化时都能正确判断。
2. Tooltip自定义：通过matTooltipClass和::ng-deep（或关闭视图封装）自定义Tooltip的样式，让错误详情更醒目。
3. 变更检测处理：在修改showErrorSummary后调用cdr.detectChanges()，避免Angular的变更检测错误。
4. 样式适配：max-height的值可以根据你的设计系统调整，决定在多少行错误后切换为计数显示。

额外优化建议 #

• 如果你的表单是动态生成的（比如多个表单控件复用模板），可以把溢出检测逻辑封装成Angular指令，这样复用性更强。
• 若不想使用Material的Tooltip，可以自定义一个Popover组件，实现更灵活的展示效果（比如点击展开而非hover）。
• 可以给错误计数添加动画效果，比如切换时的淡入淡出，提升交互体验。

内容来源于stack exchange