Angular2 PrimeNg Dropdown Shows value when undefined

Question

For reference using libaray : https://www.primefaces.org/primeng/#/dropdown

The issue is that the select shows the first option but according to the backend the field is undefined.

  <p-dropdown [options]="avaliableTemplates" [style]="{'width':'100%'}" required placeholder="Select Title" filter [(ngModel)]="selectedTemplate" name="selectedTemplate"></p-dropdown>

Here is the code that checks on change:

 @ViewChild('createCampaignForm') form;    
 this.form.control.valueChanges.debounceTime(1000).subscribe(values => this.doValidation(values));

Here's how I am assigning avaliableTamplates

 this.campaignService.getTemplates(this.authService).subscribe(x => {
                this.avaliableTemplates = [];
                for (var i = 0; i < x.length; i++) {
                    this.avaliableTemplates.push({
                        label: x[i].title,
                        value: x[i].id
                    });
                }
            });

Based on the above it seems like the drop down doesn't default to undefined but the first element in the array. But it doesn't even recognize that the first element is selected in the back end.

Are you sure that selectedTemplate is null or undefined? Do you know the primeng version? Also, change this for to array.map, is more elegant :) — Fals
@Fals The most up to date version 2.0.4, yes selectedTemplate is undefined as show in the img and cool I shall — Ya Wang

Fals Fals · Accepted Answer · 2017-03-20T19:49:08

I digged out the docs from Prime, and also tried something here. I notice that you should add a default option, or It always selects the first option for default:

this.campaignService.getTemplates(this.authService).subscribe(x => {
    this.avaliableTemplates = x.map((e) => { 
        return { label: e.title, value: e.id}; 
    });

    // Add the default option at position 0
    this.avaliableTemplates.splice(0, 0, {label: 'Select something', value: null});
});

Angular2 PrimeNg Dropdown Shows value when undefined

2 Answers