Primeng p-dropdown onChange get value of the Object

Question

I have a p-dropdown in which I want to get the value that is selected.

<p-dropdown optionLabel="name" [options]="things"
                  placeholder="Select Thing" [(ngModel)]="input" (onChange)="getValue(input)"></p-dropdown>

typescript:

//each line prints the same thing of [object Object].
getValue(changedValue){
    console.log(changedValue);
    console.log(this.input);
    console.log(this.input.valueOf());
}

I have also tried using (ngModelChange) instead of (onChange) as well as trying $event, $event.target.value, $event.value for the parameter to getValue in my html. The console always prints [object Object].

My motivation for wanting to see the actual value is that I need the value to populate another dropdown. I use this value that I'm trying to see, as a search value to actually populate the other dropdown. This search keeps returning undefined.

Solution 1

To get the value of the first dropdown I didn't need to use (onChange). Just base both dropdowns on the same value with [(ngModel)], but populate their options like I already was.

<p-dropdown optionLabel="name" [options]="things"
                  placeholder="Select Name" [(ngModel)]="input"></p-dropdown>

<p-dropdown optionLabel="id" [options]="things"
                  placeholder="Select ID" [(ngModel)]="input"></p-dropdown>

ts:

things: Thing[];
input: String;

This is what things looks like:

things = [
        {id: 20, name: 'First'},
        {id: 45, name: 'Second'},
        {id: 22, name: 'Third'},
        {id: 67, name: 'Fourth'},
        {id: 88, name: 'Fifth'}
];

type Thing:

id: number;
name: string;

So what I needed was when I choose my name in the first dropdown, I need the second dropdown to populate with that names corresponding id. I was having trouble getting the name which is what my question here actually asks for. That was just part of this larger scheme of functionality that has now been solved.

Solution 2

you should format your things array to be compatible with ng prime's dropdown expectations like following.

interface City {
  name: string;
  code: string;
}

selectedCity1: City;

this.cities1 = [
            {label:'Select City', value:null},
            {label:'New York', value:{id:1, name: 'New York', code: 'NY'}},
            {label:'Rome', value:{id:2, name: 'Rome', code: 'RM'}},
            {label:'London', value:{id:3, name: 'London', code: 'LDN'}},
            {label:'Istanbul', value:{id:4, name: 'Istanbul', code: 'IST'}},
            {label:'Paris', value:{id:5, name: 'Paris', code: 'PRS'}}
        ];

<p-dropdown [options]="cities1" [(ngModel)]="selectedCity1"></p-dropdown>

check out more examples here

Comments

[fastAsTortoise]

what does your things look like ?

[Drew13]

@fastAsTortoise it is an array of type Thing that has three fields that are number, string, and number. I know that this array things is populated correctly because this is how I populate my options of the drop down in the first place.

[Drew13]

What I think you were suggesting was for me to make the type of my selected value the same type as the array for the dropdown is. I have now done that (input is of type Thing and array things is of type Thing), but getting the same results.

[fastAsTortoise]

can you post things array please. try to post as much as info you can and also try using the template variable like #myInput and pass it to your function. It seems like you are getting the string instead of values.

[Drew13]

I figured it out. Didn't have to use (onChange). I'll post my answer in a moment.

[MeVR]

Hi, when i tried to access the drop-down name like this.name i got undefined..could you please help?i also want to access the name of drop-down in component!