Angular 15中mat-form-field日期选择器标签覆盖图标问题求解

以下是几种可行的解决方法，可根据需求选择：

方案1：标签过长时截断显示省略号 #

通过自定义CSS限制标签容器宽度，让过长标签自动截断并显示省略号，避免覆盖右侧日期选择器图标。

在组件样式文件（或全局样式文件）中添加：

::ng-deep .mat-form-field-label-wrapper {
  max-width: calc(100% - 48px); /* 48px为图标区域预留宽度，可根据实际调整 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

该方法能保证标签在未聚焦状态下不超出容器覆盖图标，聚焦后浮动标签也不受影响。

方案2：调整聚焦时标签的偏移位置 #

若希望保留完整标签内容，可调整聚焦时浮动标签的位置，让它远离图标区域：

::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
  transform: translateY(-1.2em) scale(0.75) translateX(-8px);
}

注：translateX(-8px)的数值可根据标签长度和容器宽度微调，确保标签不与图标重叠。

方案3：使用占位符替代浮动标签 #

若不需要浮动标签的交互效果，可将标签内容改为输入框占位符，从根源避免标签覆盖图标的问题：

<mat-form-field style="width: 200px;">
  <input matInput [matDatepicker]="dateLoan" readonly 
         formControlName="dateFinalPaymentControl"
         placeholder="Date of Final Loan Payment">
  <mat-datepicker-toggle matSuffix [for]="dateLoan"></mat-datepicker-toggle>
  <mat-datepicker #dateLoan></mat-datepicker>
</mat-form-field>

方案4：给标签添加右侧内边距 #

通过给标签添加右侧内边距，为图标预留空间，避免标签内容延伸到图标区域：

::ng-deep .mat-form-field-label {
  padding-right: 48px;
}

该方法简单直接，适合标签长度不是特别长的场景。

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