mat-input中的占位符位置

Question

我正在使用angular6和angular material创建这个漂亮的网站。

我使用mat-form-field和mat-input创建了一个带有placeholder文本的文本输入框。

这个placeholder文本位置有两种状态。

第一种是当文本输入框为空且你未聚焦到该元素时：

另一种是当你聚焦到文本输入框中并/或者文本输入框不为空时：

我希望mat-input元素处于第二种状态，即使文本输入框中没有文本内容，也要显示占位符在文本输入框上方。

我知道我可以通过某种方式添加一些空格来解决这个问题，但是否有更优雅的方法来实现我需要的功能呢？

谢谢！

- ufk

Answer 1

您可以使用floatLabel="always"，这是mat-form-field的输入属性绑定。

<mat-form-field style="width: 100%" floatLabel="always">
  <input matInput placeholder="Enter Name">
</mat-form-field>

在Stackblitz上工作

- Sivakumar Tadisetti