How to pre select Primeng Dropdown values?

angular primeng-dropdowns
Jan69 picture Jan69 · Jun 25, 2018 · Viewed 13.6k times · Source

I have primeng dropdown with set of values in my angular app.

In the view Screen , drop down is not displaying the selected value (value saved in db) instead it displays 'Select'.

HTML :

<p-dropdown    [options]="reasons" [(ngModel)]="selectedReason"   (onChange)="getCompleteReason($event)" styleClass="ui-column-filter" filter="true"> </p-dropdown>

Component.ts

this.reasons = [];
    this.reasons.push({label: 'Select', value: null});
    this.reasons.push({label: 'Reason 1', value: 'Reason 1'});
    this.reasons.push({label: 'Reason 2', value: 'Reason 2'});
    this.reasons.push({label: 'Reason 3', value: 'Reason 3'});
    this.reasons.push({label: 'Other', value: 'Other'});


this.selectedReason = 'Reason 2' (eg value stored in the db)

enter image description here

Answer

Jan69 picture Jan69 · Jun 25, 2018

It worked after i added name attribute to the dropdown

<p-dropdown   [options]="reasons" [(ngModel)]="selectedReason"  name="selectedReason"   (onChange)="getCompleteReason($event)" styleClass="ui-column-filter" filter="true">

Related questions

PrimeNG dropdown hidden by dialog

I have an Angular2 app using PrimeNG components. I want a dropdown inside a dialog box. However, when i have implemented this, the dropdown is cut off by the limit of the dialog box as shown in the screenshot below. …

Read More
PrimeNG dropdown - disable certain SelectItems

Is there an option to disable some of PrimeNG's dropdown items (SelectItems)? I notice this discussion, is something changed?

Read More
Error when trying to use p-Dropdown from PrimeNG in application

I want to use this PrimeNG-Dropdown in my application. So what I did: npm i primeng --save Then I added the DropdownModule in my imports from app.module.ts. Afterwards, I included the following code in my html: <p-dropdown […

Read More