How to pre select Primeng Dropdown values?

3
votes

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

3
angularprimeng-dropdowns
Have a look at How to set default value for PrimeNG p-dropdown. - Murat Yıldız

3 Answers

3
votes

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

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 )
0
votes

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