angular - 垫输入占位符位置

Question

我正在使用 mat-input 构建表单，但输入占位符不在正确的位置。如何设置占位符位置？

这是我的html：

<mat-form-field [hideRequiredMarker]="formTclimit.value.hideRequired" [floatLabel]="formTclimit.value.floatLabel" style="width:97%">
<div class="inputborder" [ngClass]="{'inputerror':formTclimit.controls['codename'].invalid && formTclimit.controls['codename'].touched}">
<img class="search" />
<input style="display: inline-block;" type="text" matInput formControlName="codename" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{'placeholder.search'|translate}}" (click)="searchStation()" [matAutocomplete]="tclstation">
<img class="required" />
</div>
</mat-form-field>

我从不使用 floatLabel 值。

任何想法？

提前致谢！

更新：

我也试过了，@JuNe 建议的选项，但我遇到了类似的问题：

我的html是：

<mat-form-field class="inputborder" [ngClass]="{'inputerror':formTclimit.controls['codename'].invalid && formTclimit.controls['codename'].touched}" [hideRequiredMarker]="formTclimit.value.hideRequired" [floatLabel]="formTclimit.value.floatLabel" style="width:97%;vertical-align: top!important">
 <mat-label class="matlabel"> 
     <img class="search" /> 
     <span>{{'placeholder.search'|translate}}</span> 
</mat-label> 
<input style="display: inline-block; width:80%!important; padding:5px" type="text" matInput formControlName="codename" (click)="searchStation()" [matAutocomplete]="tclstation"> <img class="required" /> <button class="float-right button-esc" style="margin-top:5px!important" (click)="formTclimit.controls['codename'].value=''"><img class="remove"/></button> 

问题类似，matlabel 添加了红色边框，但我不知道 mat-label 下方是什么或如何将 mat-label 移动到顶部。

任何想法？

谢谢！

Answer 1

您可以使用mat-label标签代替输入的占位符属性。然后您应该能够设置占位符文本的样式。

<mat-form-field>
  <mat-label class="some">Placeholdertext</mat-label>
  <input matInput type="text"/>
</mat-form-field>