Comment masquer un espace réservé dans un matériau

Question

J'utilise un composant form-field input simple comme dans le code ci-dessous

<mat-form-field class="example-form-field" >
     <input matInput type="search" placeholder="Search"  >
</mat-form-field>

Lors de la saisie de l'entrée de champ par défaut, l'espace réservé ira au-dessus.

 

Comment puis-je masquer l'espace réservé en entrant dans le champ de saisie?

Answer 1

Tu peux essayer: 

DEMO ----> Solution

Vous pouvez également créer une directive pour le même

Vous pouvez remplacer (cliquer) ----> (focus) selon vos besoins

 <div>
    <mat-form-field floatLabel=never>
       <input (click)="checkPlaceHolder()" (blur)="checkPlaceHolder()" matInput placeholder=" {{myplaceHolder}} ">
    </mat-form-field>
 </div>

En TS:

myplaceHolder: string ='Enter Name'

 checkPlaceHolder() {
    if (this.myplaceHolder) {
      this.myplaceHolder = null
      return;
    } else {
      this.myplaceHolder = 'Enter Name'
      return
    }
  }

Answer 2

vous pouvez essayer cette solution.

utiliser [floatLabel]="'always'"

J'ai créer une démo sur Stackblitz

<div class="example-container">
  <mat-form-field
      [floatLabel]="'always'">
    <input matInput placeholder="Simple placeholder" required>
  </mat-form-field>
</div>

Answer 3

Je suis tombé sur cette question lorsque je cherchais un moyen de cacher l'espace réservé lorsque le champ de saisie n'est pas vide. La solution que j'ai trouvée est une modification de celle de Krishna, qui remplace l'argument mat-form-fieldfloatLabel de always à never:

<div class="example-container">
  <mat-form-field
      [floatLabel]="'never'">
    <input matInput placeholder="Simple placeholder" required>
  </mat-form-field>
</div>