Angular Material 11：如何让Mat-Form-Field标签固定在轮廓边框

需求与现状 #

需要修改基于Angular Material 11的自定义日期输入组件样式，实现以下两种效果之一：

• Mat-Form-Field的标签始终固定在轮廓边框位置（仅需该布局，无需紫色样式）
• 仅保留固定在边框上的标签，无占位符

当前效果：无输入值时占位符显示在框内，有值时标签上浮至边框上方。

相关代码 #

展示组件HTML：

<div class="form-group dueDatePop">
   <app-duedate
    [parentForm]="myForm"
    [controlName]="'EndDate'"
    [placeholder]="'End Date'"
    tabindex="13"
   ></app-duedate>
</div>

app-duedate组件HTML：

<ng-template #inputContent>
    <mat-label></mat-label>
    <mat-form-field appearance="outline">
      <input
        class="form-control"
        [placeholder]="placeholder"
        matInput
        [matDatepicker]="dp"
        [formControlName]="controlName"
        maxlength="10"
      />
      <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
      <mat-datepicker #dp></mat-datepicker>
    </mat-form-field>
</ng-template>

此前尝试的无效方案：

• 设置空<mat-label>并用placeholder替代标签，位置不符合预期
• 通过CSS调整.mat-form-field-label位置时，边框会穿过标签：

::ng-deep .date-picker-form-field-as-placeholder .mat-form-field-label{
    padding-left: 0px;
    padding-top: 7.5px;
}

• 将appearance改为"legacy"并在mat-label中添加文本，未实现需求

解决方案 #

方案一：让标签始终固定在轮廓边框位置 #

1. 修改app-duedate组件HTML，为mat-form-field添加自定义类，同时将原placeholder文本移入mat-label：

<ng-template #inputContent>
    <mat-form-field appearance="outline" class="fixed-label-outline">
      <mat-label>{{ placeholder }}</mat-label>
      <input
        class="form-control"
        matInput
        [matDatepicker]="dp"
        [formControlName]="controlName"
        maxlength="10"
      />
      <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
      <mat-datepicker #dp></mat-datepicker>
    </mat-form-field>
</ng-template>

2. 添加以下CSS样式（若在组件内使用需加::ng-deep，全局样式文件中可省略）：

::ng-deep .fixed-label-outline {
  /* 强制标签保持浮动状态的缩放比例 */
  .mat-form-field-label-wrapper {
    transform: translateY(-1.25em) scale(0.75) !important;
    transform-origin: top left !important;
  }
  /* 调整标签位置贴合边框，用背景色覆盖边框避免穿透 */
  .mat-form-field-label {
    top: 1.5em !important;
    left: 0.75em !important;
    padding: 0 0.25em;
    background-color: #fff; /* 需与表单背景色一致 */
  }
  /* 调整输入框内边距，避免内容被标签遮挡 */
  .mat-input-element {
    padding-top: 0.75em !important;
  }
}

方案二：仅保留固定在边框上的标签，无占位符 #

该方案与方案一逻辑一致，仅移除输入框的placeholder属性，确保标签始终显示在边框位置：

1. 修改组件HTML：

<ng-template #inputContent>
    <mat-form-field appearance="outline" class="fixed-label-only">
      <mat-label>{{ placeholder }}</mat-label>
      <input
        class="form-control"
        matInput
        [matDatepicker]="dp"
        [formControlName]="controlName"
        maxlength="10"
      />
      <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
      <mat-datepicker #dp></mat-datepicker>
    </mat-form-field>
</ng-template>

2. 添加CSS样式：

::ng-deep .fixed-label-only {
  .mat-form-field-label-wrapper {
    transform: translateY(-1.25em) scale(0.75) !important;
    transform-origin: top left !important;
    pointer-events: none; /* 避免标签干扰输入框点击 */
  }
  .mat-form-field-label {
    top: 1.5em !important;
    left: 0.75em !important;
    padding: 0 0.25em;
    background-color: #fff; /* 需与表单背景色一致 */
    color: rgba(0,0,0,0.6); /* 匹配默认占位符色调 */
  }
  .mat-input-element {
    padding-top: 0.75em !important;
  }
  /* 隐藏默认占位符样式 */
  .mat-input-placeholder {
    display: none !important;
  }
}

注意事项 #

• background-color需与表单实际背景色保持一致，避免出现色块不协调的问题
• 可根据组件实际尺寸调整top、left、transform的数值，优化适配效果

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