代码之家 › 专栏 › 技术社区 › naoru

第一次使用浮点标签渲染的角度素描下拉列表

primeng angular

0

naoru · 技术社区 · 7 年前

我有一个角度应用程序,我使用浮动标签当我第一次加载组件(一个p对话框)时,浮动标签“向下”到select,如图所示

这是我使用的代码

<div class="ui-g-12">
  <span class="ui-float-label">
    <p-dropdown [options]="categories" formControlName="category" [style]="{ width: '100%' }"></p-dropdown>
    <label>{{ 'products.category-name' | translate }}</label>
  </span>
</div>

这个表单是使用formBuilder生成的,我注意到,如果调用form.reset(),那么在下一次很好地呈现模块时。我不确定问题的根源是什么有什么想法吗?

3 回复 | 直到 7 年前

1

3

Binara Thambugala 6 年前

请像这样使用;

<div class="ui-g-12">
  <span class="ui-float-label">
    <p-dropdown [autoDisplayFirst]="false" [options]="categories" formControlName="category" [style]="{ width: '100%' }"></p-dropdown>
    <label>{{ 'products.category-name' | translate }}</label>
  </span>
</div>

看看 自动显示优先 (如果未定义占位符且值为空,是否将第一项显示为标签。)中的定义 https://www.primefaces.org/primeng/#/dropdown

自动显示优先 是 符合事实的 默认情况下。因此,如果未定义占位符且值为空,则将第一项显示为标签。并且与 浮动标签 .

2

naoru 7 年前

问题似乎与使用patchValue或setValue填充表单时,下拉填充属性未设置为true有关您必须同时手动设置它

这里是如何

<p-dropdown [options]="invoiceStatus" formControlName="status" [style]="{ width: '100%' }" #ddStatus></p-dropdown>

在控制器中

@ViewChild('ddStatus')
  ddStatus: Dropdown;

稍后,当设置表单调用的值时,可以这样设置filled属性 this.ddStatus.filled=true; 我希望他们能尽快解决

3

1

Cyril 7 年前

我不知道原因是什么,但您可以尝试在下拉列表中放置@ViewChild(),并对其调用updateFileState()方法。

4

0

Paul Hebert 7 年前

您的标签呈现在下拉列表的顶部。您正在使用的浮动标签CSS不是为p下拉设置的(与输入或选择相反)