In PrimeNG, how do I bind a p-dropdown selected value to a form control?

Question

I'm using Angular 13 and PrimeNG 13. I would like to bind a dropdown to a form control. In my edit form, I use a <p-dropdown> like so

<p-dropdown [options]="clients" placeholder="Select a Client" optionLabel="name"
    [(ngModel)]="editClientObj"  
    dataKey="clientId" 
    formControlName="clientId"></p-dropdown>

My "options" value is an array of objects that look like this ...

[{name: 'Mike', clientId: 3}, { ... }]

In my service file, I trigger the function that sets up the form with the proper values

edit(obj:ClientOrder){
  this.editClientObj = obj;
  ...
  this.form = this.formbuilder.group({
  ...
    clientId: [obj.clientId, Validators.required]
  });

However when I submit my form, the form control's clientId field is set to the object: {name: 'Mike', customerId: 3}, instead of just the ID. How do I adjust my <p-dropdown> so that it only binds the ID and not the entire object?

Answer 1

You could use optionValue input binding to select id value

<p-dropdown [options]="clients" placeholder="Select a Client" optionLabel="name"
                [(ngModel)]="editClientObj"  
                dataKey="clientId"  optionValue="clientId"
                formControlName="clientId"></p-dropdown>

Note: You should not mix reactive and template driven form together.

For More Info

Prime Ng Official Doc