禁用控件状态时，角度材质输入将占位符移动到顶部答案

【问题标题】：Angular Material Input move placeholder on top when controls state is disabled禁用控件状态时，角度材质输入将占位符移动到顶部
【发布时间】：2018-06-07 12:57:23
【问题描述】：

对于角材质，当我们在输入控件中输入值时，占位符就变成了一个标签。

我将表单用于查看和编辑模式。在查看模式下，我只是禁用表单，因此用户无法编辑它（基于用户角色，API 也会处理它）

但是，看着带有占位符文本的控件看起来很奇怪。是否有任何 CSS 技巧，以便我可以将占位符值作为该控件的标签并将输入显示为空白字段（因此看起来该控件没有可用值，并且占位符实际上成为顶部的标签）

请指教

【问题讨论】：

标签： angular-material-5

【解决方案1】：

好的，我的问题似乎不够清楚。

我找到了解决方案，而且非常简单。

我使用了 mat-form-field 的“floatLabel”属性，并通过表单的 disabled 属性使其成为动态的。

如果表单被禁用，占位符将成为标签，即使输入没有可用的值。

【讨论】：

【解决方案2】：

<mat-form-field appearance="fill" floatLabel="never">
  <mat-label>Input</mat-label>
  <input matInput>
</mat-form-field>

【讨论】：

floatLabel="never" ：它修复了标签并且不允许它浮动到顶部。