如何在Angular mat-form-field中实现mat prefix与mat label对齐

解决方案 #

你可以通过自定义CSS调整matPrefix的垂直位置实现对齐，以下是具体操作：

方案1：仅调整当前表单（推荐，无全局污染）

1. 给当前mat-form-field添加自定义类，同时给前缀元素加标识类：

<mat-form-field appearance="fill" class="align-prefix-form">
  <mat-label>Termination Payment ($)</mat-label>
  <input 
    name="terminationPayment" 
    matInput
    (keyup) = "computeBuyout()"
    mask="separator.0" 
    thousandSeparator=","
    [allowNegativeNumbers]="false"
    [(ngModel)]="dealDispositionFormFields.terminationPayment"
    >
    <span matPrefix class="currency-prefix" *ngIf="dealDispositionFormFields.terminationPayment">$</span>
</mat-form-field>

2. 添加对应样式：
   如果样式写在当前组件的样式文件中，需要加::ng-deep穿透Angular视图封装：

::ng-deep .align-prefix-form .mat-form-field-prefix {
  /* 数值可根据实际显示效果微调 */
  transform: translateY(-0.8em);
}

如果样式写在项目全局样式文件（如styles.scss）中，不需要加::ng-deep：

.align-prefix-form .mat-form-field-prefix {
  transform: translateY(-0.8em);
}

方案2：全局适配所有fill外观的表单

如果项目中所有appearance="fill"的表单都需要前缀和label对齐，可以直接在全局样式文件中添加如下代码：

.mat-form-field-appearance-fill .mat-form-field-prefix {
  transform: translateY(-0.8em);
}

注：上述代码中的偏移值-0.8em是适配Angular Material默认主题的数值，如果你自定义过表单的字体、行高等参数，可以自行调整偏移值直到对齐效果符合要求。

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