垫输入中的占位符位置

Question

我正在使用angular6和有角度的材质来创建这个简洁的网站。

我将=arrayformula(TODAY())与mat-form-field一起使用，因此请显示带有mat-input文本的文本输入元素。

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

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

和另一个，当您专注于输入文本和/或输入文本不为空

我希望mat-input元素处于第二状态。即使在其中没有文本并且我没有专注于该元素的情况下，也可以在文本输入元素上方显示占位符。

我知道我可以解决这个问题，并为元素的值添加某种空白。.但是有没有更优雅的方法来实现我所需要的？

谢谢！

Answer 1

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

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

工作Stackblitz