当用户输入文本时在 ng-select 中隐藏占位符

Question

我正在尝试使用 ng-select with material design in my Angular 9 project for the autocomplete. By default, when the user entering the text ng-select shows the place holder at top of the autocomplete input field. However, I would like to hide the placeholder as soon as the user enters the text and show it when he clears the input field. Is there a way to achieve this using CSS? Project uploaded to StackBlitz 作为参考

Answer 1

我会推荐使用元素提供的搜索事件。它会为您提供输入的价值，在您的情况下，您只关心它是否具有价值。存在 css 解决方案，但这感觉更简洁。

在html

<ng-select ...
   placeholder="{{myPlaceholder}}"
   (search)="onSearch($event)">
  </ng-select>

在TS中。

.
.
myPlaceHolder = "Select Person"
.
.
onSearch($event) {

 this.myPlaceHolder = $event.term == '': 'Select Person': '';
}

当用户输入文本时在 ng-select 中隐藏占位符

Hide place holder in ng-select when user enters text

angular

typescript

autocomplete

angular9