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)

Palpitant

Have a look at How to set default value for PrimeNG p-dropdown. – Aun

Answer 1

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

Palpitant

this didn't work for me – Sela

Answer 2

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}]

Deciliter

Answer 3

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 )

Spectrochemistry

Answer 4

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

Mud