Using <p-dropdown> with form control

Question

I think I am having an issue with value binding. I have 2 dropdowns on my page currently. The rest of the page is using PrimeNg for UI and would like to make these dropdowns look the same as the rest of the page. How should I go about making this work.

One dropdown is a supervisor list.

<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>

The other is a leave code list

<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>

I have 2 arrays of values being called from my .ts file

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

When I use the tags I just get an empty drop down. I tried just using initially but then I was not able to get the required fields to validate.

Answer 1

Did you import DropdownModule?

import {DropdownModule} from 'primeng/dropdown';

See the documentation , html binding should be

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

where supervisorList will be defined as SelectItem in controller and needs to be in a label + value format.

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