web-dev-qa-db-ja.com

入力フォーカスのプレースホルダーテキストをマットオートコンプリートで自動非表示

私はドキュメントの例に従って入力付きのマットオートコンプリートコンポーネントを使用しており、ラベルを使用するように入力を構成し、次のように非フローティングプレースホルダーテキストを使用しています。

<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>

入力をクリックして文字の入力を開始しても、最初の文字を入力するまでは、プレースホルダーは消えません。設定する必要があるconfig\propertiesがいくつか不足していますか？

または、プレースホルダー値バインディングを設定して、それを自分で設定する必要がありますか？

ありがとう

angularangular-material2angular-material-6
6
mindparse

あなたはマットプレースホルダーを使用し、プレースホルダーを隠す（フォーカス）イベントでそれにクラスを追加することによってそれを隠すことができます。このリンクを参照してください https://stackoverflow.com/a/60021883/90261

0
Kurkov Igor

OOTB matInputを使用し、「on-float」のみのプレースホルダーを非表示にする

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

完全なソリューション

.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