web-dev-qa-db-fra.com

mat-autocomplete auto-hide texte de l'espace réservé sur le focus d'entrée

J'utilise le composant mat-autocomplete avec une entrée selon les exemples dans les documents, et j'ai configuré l'entrée pour utiliser une étiquette et avoir un texte d'espace réservé non flottant comme ceci:

<mat-form-field floatLabel="never">
  <input 
    type="text" 
    placeholder="Search..." 
    aria-label="Number" 
    matInput 
    [formControl]="search" 
    [matAutocomplete]="auto">
  <button 
    mat-button 
    *ngIf="search.value" 
    matSuffix 
    mat-icon-button 
    aria-label="Clear" (click)="clearSearch()">
      <mat-icon>close</mat-icon>
  </button>
  <mat-autocomplete 
    #auto="matAutocomplete" 
    (optionSelected)="goToResult($event)">
    <mat-option 
      *ngFor="let result of searchResults" 
      [value]="result">
      {{result.id}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

Lorsque vous cliquez sur l'entrée pour commencer à saisir des caractères, l'espace réservé ne disparaît pas, jusqu'à ce que j'entre le premier caractère. Suis-je absent de certaines propriétés de configuration qui devraient être définies?

Ou dois-je configurer une liaison de valeur d'espace réservé et la définir\effacer moi-même?

Merci

angularangular-material2angular-material-6
6
mindparse

vous pouvez utiliser mat-placeholder et le masquer en lui ajoutant une classe sur l'événement (focus) qui masquera l'espace réservé. Voir ce lien https://stackoverflow.com/a/60021883/90261

0
Kurkov Igor

en utilisant OOTB matInput et en masquant l'espace réservé "on-float" uniquement)

/*hide the floating mat input part */
.mat-form-field-should-float .mat-form-field-label-wrapper {display: none;}

solution complète

.middle-cut .mat-form-field-should-float .mat-form-field-label-wrapper {display: none;}
.middle-cut .mat-form-field-should-float .mat-form-field-infix {    margin-top: -10px;}
.middle-cut .mat-form-field-infix  {border:0; padding-top:0; padding: .1375em 0; }
.middle-cut .mat-form-field-label{top: 0.85em;}
0
bresleveloper