angular-material-5 - 禁用控件状态时，角度材质输入将占位符移动到顶部

Question

当我们在输入控件中输入值时，角度材质占位符成为标签。

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

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

请指教

score 2 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

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

2 回答 2