How to pre select Primeng Dropdown values?

Question

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)

Have a look at **[How to set default value for PrimeNG p-dropdown](https://stackoverflow.com/questions/49623774/how-to-set-default-value-for-primeng-p-dropdown/52290047#52290047)**. — Murat Yıldız, Sep 12 '18 at 07:49

score 5 · Accepted Answer · answered Jun 25 '18 at 20:13

5

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">

answered Jun 25 '18 at 20:13

Jan69

1,109
5
25
48

this didn't work for me – java-addict301 Sep 03 '22 at 03:26

score 1 · Answer 2 · answered Aug 17 '21 at 04:09

You can also try this. Let's say, your dropdown looks like this:

 <p-dropdown
  class="iteration-dropdown"
  [options]="cities"
  [(ngModel)]="selectedCity"
  name="selectedCity"
  (onChange)="loadIterationFeatures()"
 ></p-dropdown>

On ngOnInit, do this:

 this.selectedCity = this.select;
 this.cities = [{label: this.select, value: this.id}]

score 0 · Answer 3 · answered Apr 26 '19 at 19:04

To pre select your primeng dropdown values, you can update your formGroup values using patchValue() like this:

public parentForm: FormGroup
this.parentForm = this.formBuilder.group({
      group: [null, [Validators.required]],
      id_module:  [null]
    })

const newObj = {group: 'Test', id_module: 32}
this.parentForm.patchValue(newObj )

score 0 · Answer 4 · answered Jul 27 '23 at 11:30

HTML:

<p-dropdown    [options]="reasons" [(ngModel)]="selectedReason"   (onChange)="getCompleteReason($event)" styleClass="ui-column-filter" filter="true" optionValue="label"> </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'

Either do the above explained, or

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 = {label: 'Reason 2', value: 'Reason 2'}

This is happening because you need to specify the whole object when you are selecting the whole object from the options that you have given

But if you specify the optionValue to be just the value, then specifying only the value too would work

How to pre select Primeng Dropdown values?

4 Answers4

Linked