заполнитель в мат-вводе

Question

Я использую angular6 с угловым материалом для создания этого аккуратного веб-сайта.

Я использую mat-form-field с mat-input, поэтому показываю элемент ввода текста с текстом placeholder.

позиция текста заполнителя имеет два состояния.

one!когда ввод текста пустой и вы не сфокусированы на этом элементе:

и другой, когда вы сфокусировались на вводимом тексте и / или вывводимый текст не пустой

Я хочу, чтобы элемент 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