How do I set primeNg dropdown selected value as the id of the object instead of the entire object

Question

I am data binding a collection to the prime NG dropdown.

<p-dropdown [options]="statusTypes" formControlName="StatusTypeCode" optionLabel="Name">
</p-dropdown>

I am setting the formControlName to this dropdown, which works great. The only problem is that the form sets the entire object (example: statusTypes[2]). I want the form to specify a value for the selected value, instead of the entire object (example: statusTypes[2].StatusTypeCode)

I know I can recreate the options before setting them...

this.statusTypes= [];
for (let statusType of this.allStatusTypes) {
   this.statusTypes.push({ label: (statusType.Name), value: statusType.StatusTypeCode });
}

but then I have to do that on every drop down collection!

Is there any way in the HTML to just specify the value of the dropdown equal to a property (example: optionValue="StatusTypeCode") so I can have the form populate with the id instead of the entire object?

Answer 1

I wasn't able to set a value with the default primeNG dropdown component. To try and keep it DRY I instead created a helper service that creates the array based off a collection.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class HelperService {

  constructor() { }

  getDropdownValuesFromArray(collectionArray : any[]): any[] {
    let typeArray: any[] = [];
    for(let i = 0; i< collectionArray.length; i++) {
      typeArray.push({});
      typeArray[i].label = collectionArray[i].Name;
      typeArray[i].value = collectionArray[i].Code;
    }
    return typeArray;
  }
}

Seems like an oversight from primeNG, hopefully they add it.