Question

我正在按照文档中的示例将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？

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

谢谢

Answer 1

您可以删除输入中的占位符，并在<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>

Answer 2

使用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;}

Answer 3

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

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

3 个答案: