matinput 中的占位符位置

Question

我使用 angular6 和 angular material 来创建这个简洁的网站。

我正在使用 mat-form-field 和 mat-input，因此显示带有 placeholder 文本的文本输入元素。

占位符文本位置有两种状态。

一个！当文本输入为空并且您没有专注于该元素时：

另一个当你专注于输入文本时and/or你输入的文本不为空

我希望 mat-input 元素处于第二状态。在文本输入元素上方显示占位符，即使其中没​​有文本并且我没有关注该元素。

我知道我可以做一个解决方法，并向元素的值添加某种空的 space。但是有没有更优雅的方法来实现我的需要？

谢谢！！！

Answer 1

您可以使用 floatLabel="always"，这是 mat-form-field

的输入 属性 绑定

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

工作Stackblitz