Question

所以我已经用primem的自动完成功能构建了一个下拉列表，但我遇到了问题。当我单击下拉菜单以选择一些数据时，占位符只是消失了，但我希望它上升，而不是像我的文本输入字段那样。但是我很困惑，因为我的下拉菜单没有任何实际的输入或标签。

我的下拉菜单中最外面的div具有“ ui-float-label”类。在里面，我有一个类为“ ui-fluid”的div。最后在“ ui-fluid”中，是我的p-autocomplete，看起来像这样。

<p-autoComplete
                [(ngModel)]="valueOfSingleSelection"
                [suggestions]="selectionResults"
                (completeMethod)="search($event)"
                field="label"
                [placeholder]="selectorProperties.labelMls"
                [minLength]="1"
                [dropdown]="true"
                [disabled]="!selectorProperties.enabled"
                required
                (onBlur)="setRequiredOnBlur()">

那么我如何使占位符上升？我知道菜鸟有问题，但是我感谢我能得到的每一个帮助，谢谢

Answer 1

您应该使用浮标，这是文档： https://www.primefaces.org/primeng/showcase/#/floatlabel

用法如下：

    <div class="p-field p-col-12 p-md-4">
        <span class="p-float-label">
            <p-autoComplete inputId="autocomplete" [(ngModel)]="value2" [suggestions]="filteredCountries" (completeMethod)="searchCountry($event)" field="name"></p-autoComplete>
            <label for="autocomplete">AutoComplete</label>
        </span>
    </div>

基本上，您会在class="p-float-label"容器中扭曲自动填充和标签

如何为primeng自动完成占位符提供浮动标签功能？ Angular 9 + PrimeNg

1 个答案: