如何在Angular Material中实现可替换的标准占位文本效果

问题原因说明 #

• 第一次写法异常是因为你给<mat-label>添加了matPrefix属性，该属性作用是在输入框头部插入固定展示的前缀内容，不会随输入消失，因此你输入的文本会显示在该标签内容之后，出现错位。
• 第二次写法异常是因为Angular Material的mat-form-field默认启用浮动标签效果，你设置的placeholder属性、或者使用<mat-placeholder>标签的内容，默认都会被识别为浮动标签内容，聚焦/有输入时就会浮动到输入框上方，不符合原生占位符的表现。

解决方案 #

不需要绕开Angular Material使用原生元素，只要给mat-form-field添加floatLabel="never"属性即可禁用浮动标签效果，让占位符表现和原生HTML完全一致：输入时自动消失，失去焦点且无内容时重新显示。

正确代码示例（带前缀图标）：

<mat-form-field 
  *ngIf="hasVisibleChild(item) && item.display == 'Email'"
  floatLabel="never"
>
  <mat-icon fontIcon="mail" matPrefix></mat-icon>
  <input 
    matInput 
    type="email" 
    (change)="onChange($event)" 
    #emailAddress 
    placeholder="Enter Email ID"
  />
</mat-form-field>

补充说明 #

floatLabel属性共有三个可选值，你可以根据需求调整：

• auto：默认值，输入框聚焦或有内容时，标签浮动到上方
• always：标签始终浮动在输入框上方
• never：标签始终作为占位符展示，不会上浮

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