p-dropdown ~ Reactive Forms bind to single property on object

UI Components for Angular
Post Reply
Posts: 1
Joined: 05 Mar 2020, 16:03

05 Mar 2020, 17:04

primeNG: 8.1.1
NG: 7.2.15

I am using multiple p-dropdowns in a reactive form. The data [options] of the dropdowns are retrieved by the api in an array of objects {id: number, name: string}. However the form data retrieved by the api only has an ID that i can use to set the initial selection of the dropdown. When an additional selection is made, the from control is bound to the entire object {id: number, name: string}, instead of just the ID.

Is there a way that I can bind a list of objects to the dropdown and have the dropdown use the id for all binding purposes?

Here is a simplified version:


Code: Select all

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <label>What is your favorite soda?</label> 
  <button type="submit">Submit</button>

Code: Select all

  myForm: FormGroup = new FormGroup({});;

  objects: Array<{id: number, name: string}> = [
      id: 0,
      name: "Coke"
      id: 1,
      name: "Diet Coke"
      id: 2,
      name: "Mountain Dew"
      id: 3,
      name: "Dr. Pepper"
      id: 4,
      name: "Sprite"

    private _fb: FormBuilder,

  getFavSoda = () => this.myForm.get('favSoda').value

  private buildForm(): void {
    this.myForm = this._fb.group({
      favSoda: [1, Validators.required]
What Works:
1.) The binding of the objects
2.) The form control is updated with the corresponding selected object
1.) I am setting the initial value of favSoda to 1 (Diet Coke), I would expect the dropdown to be able to identify that I want Diet Coke selected by default, and not have the placeholder text be displayed at all.
2.) After a selection is made the formControl is bound to the entire object, example:

Code: Select all

//actual output = {1, "Diet Coke"}
//desired output = 1
I would like to avoid using a more template driven approach to binding. Meaning having a handler function to update the values. as well as using a 'selectedFavSoda' for an ngModel binding. I am working in several constraints that make these requirements important.

Posts: 1
Joined: 13 Nov 2020, 02:10

13 Nov 2020, 02:12


I have exactly the same problem in angular 10, could you solve it?

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests