如何在 Angular 8 中更改 Angular Material 占位符的位置？答案

【问题标题】：How to change position of Angular Material placeholder in angular8?如何在 Angular 8 中更改 Angular Material 占位符的位置？
【发布时间】：2020-03-08 17:59:35
【问题描述】：

我有angular8 项目，其中有angular material。我正在使用mat-autocomplete 进行输入自动完成。这是我的html代码

<form class="example-form">
  <mat-form-field class="example-full-width dummy-input-field" floatLabel="never">
    <input matInput class="custom-input" placeholder="State"  [matAutocomplete]="auto" [formControl]="stateCtrl">
  </mat-form-field>
  <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
        <img class="example-option-img" aria-hidden [src]="state.flag" height="25">
        <span>{{state.name}}</span> |
        <small>Population: {{state.population}}</small>
      </mat-option>
    </mat-autocomplete>
</form>

这是我完整的Stackblitz Link 来演示我的问题。输入中有一个占位符，上面写着“状态”。我想将这个placeholder 定位在输入的垂直中间，就像Html 的普通输入框一样。

如何更改angular material输入占位符的位置？

【问题讨论】：

标签： css angular angular-material mat-input

【解决方案1】：

试试这个

stack blitz working Demo

休闲角材质初始steps 并导入需要的依赖项

希望对你有帮助

【讨论】：

我自定义了material autocomplete，所以您可以在我给定的stackblitz 链接中进行编辑吗？因为在您的工作示例中，您使用的是angular-material autocomplete，但我根据自己的需要对其进行了定制。所以请在我的示例中进行编辑。
在您的示例中，当我尝试为input 的anglar-material 自动完成添加边框时，它看起来就像我的示例。当我在mat-autocomplete 内为材料输入提供边框时，占位符/标签似乎在不合适的位置。