mat-autocomplete自动隐藏输入焦点上的占位符文本

时间:2018-08-26 17:33:31

标签: angular angular-material2 angular-material-6

我正在按照文档中的示例将mat-autocomplete组件与输入配合使用,并且我将输入配置为使用标签,并且具有非浮动的占位符文本,如下所示:

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

还是我需要设置一个占位符值绑定并对其进行设置\自己清除?

谢谢

3 个答案:

答案 0 :(得分:5)

您可以删除输入中的占位符,并在<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>MRP : </td> <td><input type="text" id="mrp" value="1" /></td> </tr> <tr> <td>Selling price : </td> <td><input type="text" id="selling_price" value="5" /></td> </tr> <tr> <td colspan="2"> <button onclick="compare()">Compare Value</button> </td> </tr> </table> <label id="lbStatus"></label>中添加mat-placeholder,并使用类自定义CSS。

HTML文件:

mat-form-field

CSS文件:

<form class="example-form">
  <mat-form-field floatLabel="never">
      <input 
        matInput 
        type="text" 
        aria-label="Number" 
        matInput [formControl]="myControl" 
        [matAutocomplete]  ="auto">

      <mat-placeholder class="placeholder">Search</mat-placeholder>

      <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let option of options" [value]="option">
          {{option}}
        </mat-option>
      </mat-autocomplete>
  </mat-form-field>
</form>

答案 1 :(得分:0)

使用OOTB matInput,仅将占位符隐藏在“浮动”上

/*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;}

答案 2 :(得分:0)

您可以使用mat-placeholder并通过在(focus)事件上向其添加一个类来隐藏它来隐藏它。看到此链接https://stackoverflow.com/a/60021883/9026103