垫自动完成自动隐藏输入焦点上的占位符文本

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>

当单击输入以开始输入字符时，占位符不会消失，直到我输入第一个字符。我是否缺少一些应该设置的配置\属性？

还是我需要设置占位符值绑定并自己设置\清除它？

谢谢

Answer 1

您可以删除输入中的占位符并在mat-form-field中添加mat-placeholder，并使用类自定义 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>

CSS 文件：

.mat-focused .placeholder {
color: transparent;
}
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
}

Answer 2

使用 OOTBmatInput并仅隐藏占位符"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;}

Answer 3

您可以使用mat-placeholder并通过向它添加一个类来隐藏它(焦点(事件，这将隐藏占位符。请参阅此链接 https://stackoverflow.com/a/60021883/9026103