Angular Material：实现错误提示容器高度自适应错误文本

当前mat-mdc-form-field-subscript-wrapper容器因默认样式限制，无法自适应多行错误消息的高度，导致文本被截断。以下是具体实现思路：

• 覆盖固定高度样式
  Angular Material默认给mat-mdc-form-field-subscript-wrapper设置了固定高度或最小高度，直接通过自定义CSS移除限制：

  mat-form-field .mat-mdc-form-field-subscript-wrapper {
    height: auto;
    min-height: unset;
  }
  

  （优先用父元素选择器提高优先级，避免使用!important）

• 调整错误文本的换行与溢出规则
  默认错误文本可能被设置为单行显示，需修改样式允许自动换行并取消溢出隐藏：

  .mat-mdc-form-field-error-wrapper {
    overflow: visible;
  }
  
  .mat-mdc-form-field-error {
    white-space: normal;
    line-height: normal;
  }
  

• 确保表单字段整体自适应
  若mat-form-field本身有固定高度约束，同步调整为自适应：

  mat-form-field {
    height: auto;
  }
  

• 绑定正确的表单验证状态
  确保错误消息通过Angular表单验证动态触发，让组件正确感知内容变化：

  <mat-error *ngIf="username.invalid && (username.dirty || username.touched)">
    Your username must be at least 8 characters long and should not contain spaces and the following characters \ < > ;
  </mat-error>
  

完成以上调整后，mat-mdc-form-field-subscript-wrapper容器会根据错误文本的实际高度自动扩展，实现自适应布局。

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