使用 <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'},
            ...
];