loaction de placeholder dans mat-input

Question

J'utilise angular6 avec angular material pour créer ce site web soigné.

J'utilise un mat-form-field con mat-input pour afficher un élément de saisie de texte avec un placeholder texte.

la position du texte de l'espace réservé a deux états.

un ! lorsque la saisie de texte est vide et que vous n'êtes pas concentré sur cet élément :

et l'autre lorsque vous vous êtes concentré sur le texte d'entrée et/ou que le texte d'entrée n'est pas vide.

Je veux que l'élément mat-input soit dans le deuxième état. pour montrer le placeholder au-dessus de l'élément de saisie de texte même s'il n'y a pas de texte dedans et que je ne suis pas concentré sur cet élément.

Je sais que je peux contourner le problème en ajoutant une sorte d'espace vide à la valeur de l'élément, mais existe-t-il un moyen plus élégant d'obtenir ce dont j'ai besoin ?

Merci ! !!

Answer 1

Vous pouvez utiliser floatLabel="always" qui est le lien de la propriété d'entrée pour mat-form-field

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

Travail Stackblitz