Primeng: Getting default value from dropdown

[erikaoctavia]

I am using v 1.0.0-beta.16 of primeNg. I am having trouble getting the default value in the dropdown. I am able to get the value on a change event.

I have a p-dropdown that is populated with values returned from a database:
public mySelectList: SelectItem[] = [];
public selectedItem:string;
//..get values from database into listItems array
this.listItems.forEach(item=> {
this.mySelectList.push({label: item.description, value: item});
});

Html:
<p-dropdown name="myList" [options]="mySelectList" [(ngModel)]="selectedItem" (onChange)="selectMyItem(selectedItem.name)"></p-dropdown>

I've tried changing my ngModel to a object and also a select item, but the value is always undefined when I submit the form. Is there a way to get that default value? Right now there is only one value in my dropdown list so right now I have had to add a --select an item--- null value in my dropdown to force them to select so I can get the value on the change event.

[An0d]

Same problem here.
2 way databinding with [(ngModel)] is not working...

When choosing a value in the Dropdown, the "binded object" is properly updated.
Programmaticaly set the "binded object" has no effect on the Dropdown ...

Any idea ? Any workaround until fix ?

Thanks

EDIT : Seems the problem appear only when the SelectItem.value is an Object. No problem when SelectItem.value is a string nor int.

[Krustie101]

I notice that in the code of the dropdown, no model change events are fired in the following 2 cases:

• If the options change (ngDoCheck) and the value cannot be found in the selectedItems, the first value is selected but no model change event is fired.
• On a key down event, if no value was selected. Again the first value is selected but no model change event is fired.

Aside: Looking at the first line of the onKeyDown function, I would expect a nullpointer in some cases because the selectedOption might be null.

[erikaoctavia]

@An0d how are you accessing the default value when setting the item as a string or int? I've tried updating my dropdown to use a string value and I still get undefined. I've also tried accessing through the FormGroup and it's still undefined.
<FormControl>this.loginForm.controls['myList'].value;

[An0d]

@erikaoctavia

I use two arrays : One to store the "displayed" objects (array of SelectItem objects) and the another one to map the id's of the displayed objects with the "real" objects

Sample :

component.ts

    mySelectedObject: MyObject;
    mySelectedObjectId: string;
    myObjects: MyObject[] = [];
    myDisplayedObjects: SelectItem[] = [{ label: 'No value selected...', value: null }];

ngOnInit() {
    // -- Fill this.myObjects as you want

    this.myObjects.forEach(element => {
        this.myDisplayedObjects.push({ label: element.label, value: element.id });
    });

    this.mySelectedObjectId = '12345';
    this.mySelectedObject = this.myObjects.find(o => o.id === this.mySelectedObjectId);
}

onSelectedRegattaChanged(event: any) {
    if (this.mySelectedObjectId != null && this.mySelectedObjectId !== undefined) {
        this.mySelectedObject = this.myObjects.find(o => o.id === this.mySelectedObjectId);
    }
}

component.html

<p-dropdown [(ngModel)]="mySelectedObjectId" [options]="myDisplayedObjects" (onChange)="onSelectedRegattaChanged($event)"></p-dropdown>

Hope this help !

[dmcodesailor]

An0d's solution worked for me.

[erikaoctavia]

Thanks @An0d. I see you are hard coding your first option and that is what I was trying to avoid. But I can just store the first option of my array.

[jayordway]

I wouldn't call this a solution. It would be ideal to be able to retrieve the id with the event call. It wouldn't be practical to search for a value in an array of considerable length.