<p-dropdown> 与表单控件一起使用

Question

我想我在值绑定方面遇到了问题。我目前在我的页面上有 2 个下拉菜单。页面的其余部分使用 PrimeNg for UI，并希望使这些下拉列表看起来与页面的其余部分相同。我应该如何去做这项工作。

一个下拉列表是主管列表。

<div class="ui-g form-group">
<label for="supervisors">Supervisors * </label>
<select 
class="form-control"
id="supervisors" 
required
[(ngModel)]="model.supervisor"
name="supervisor"
>
<option *ngFor="let sup of supervisors" [value]="sup">
{{sup}}
</option>
<div
[hidden]="supervisors.valid || supervisors.pristine"
class="alert alert-danger"
>
Supervisor is required
</div>
</select>
</div>

另一个是休假代码列表

<div class="ui-g-12 ui-md-1" id="test">
<label for="codes">Leave Codes * </label>
<select 
class="form-control"
id="codes"
placeholder="Select Leave Code *"
required 
[(ngModel)]="model.code" 
name="code"
>
<option *ngFor="let cod of codes" [value]="cod">{{cod}}</option>
</select>
</div>

我从我的 .ts 文件中调用了 2 个值数组

supervisors = ['Alex',"Jones",'Joe','Rogan'];
codes = ['Personal Leave','Vacation Leave', 'Sick Leave'];

当我使用标签时，我只会得到一个空的下拉菜单。我最初尝试只使用，但后来我无法获得必填字段进行验证。

Answer 1

你导入了 DropdownModule 吗？

import {DropdownModule} from 'primeng/dropdown';

请参阅文档，html 绑定应该是

<p-dropdown [options]="supervisorList" [(ngModel)]="supervisor"></p-dropdown>

其中supervisorList将在控制器中定义为SelectItem，并且需要采用标签 + 值格式。

supervisorList: SelectItem[];
this.supervisorList= [
{label: 'Alex', value: 'Alex'},
...
];