Argthtjtr

I am using PrimeNG in my angular5 app. I have issue with p-dropdown

Question

I have p-dropdown for showing countries. I bind the select options correctly there it works fine (this data coming from api), but I need to set default selected option for this p-dropdown as "India".

I set up ng-model value as India but it didn't work.

my dummy.component.html code

<div class="form-group col-md-2">

    <div>

        <label for="inputEmail4"> Select Country</label>

        <span style="color:red">*</span>

    </div>

    <p-dropdown name="country" [options]="countries" [(ngModel)]="applicant.country" placeholder="select country"

        (onChange)="getStatebyCountry(applicant.country,$event)" #country="ngModel" required>

    </p-dropdown>

    <span *ngIf="country.invalid && (country.dirty || country.touched)">

        <span [hidden]="!country.hasError('required')" style="color:#ffa500">country is mandatory</span>

    </span>

</div>

my dummy.component.ts

export class dummyComponent implements OnInit {

    //variable declaration scope for all controller function

    applicant: any = {};

    country: string; constructor() {

    }

    ngOnInit() {

        this.applicant.country = 'India';

    } 

    this.countries = ;

// this.countries.push({ label: 'Select Country', value: '' });

//getallcountries

this.UserService.getallcountries().subscribe(result => {

    console.log("countries" + result);

    this.cnt = result;

    for (let i = 0; i <= this.cnt.length; i++) {

        if (this.cnt[i].id === 1) {

            this.countries.push({ label: this.cnt[i].name, value: this.cnt[i].id });

        }

    }

 });

Try to replace

this.applicant.country = 'India';

with

this.applicant = {country: 'India'};

Edit

Display your p-dropdown once you got the data from your API.

<div *ngIf="dataLoaded">

  <p-dropdown [options]="countries" [(ngModel)]="applicant.country"></p-dropdown>

</div>

See Plunker

I use this solution to fix this

html:

<p-dropdown name="country" [options]="countries" [(ngModel)]="country" placeholder="select country" (onChange)="changeCountry()"></p-dropdown>

ts:

    public country;

    public countries;

    ngOnInit() {

        this.applicant.country = 'India';

        this.getCountry().then(()=>{

          this.country = this.applicant.country

        })

    } 

    getCountry(){

      return new Promise( (resolve,reject) => {

        this.UserService.getallcountries().subscribe(result => {

          this.cnt.forEach(element => {

            this.countries.push({

              label: element.name,

              value: element.id

            });

          });

          resolve();

        }, error =>{

          reject();

        });

      })          

    }

    changeCountry(){

     this.country = this.applicant.country;

    }

it work at primeng 6.1.3

You can set default value of PrimeNG Dropdown by using ngModel as shown on the following approach:

component.html:

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

component.ts:

selectedCity: string = 1; //Id value of the City to be selected

If it is not fixed due to version problems, try this:

this.cities.value = this.selectedCity;  

Hope this helps...

My solution was to have the countries loaded in the controller before setting the form field (ngModel or formControl). Also keep the same type of the key. Don't use number for the form control and string for the list:

// first get the cities from the server

response.cities.forEach(city => {

                      this.dropdowns['cities'].push({ value: city.id, label: element.city }); });



// when setting the form

city_id: new FormControl(this.user.city_id)

In the code above this.user.city_id and city.id has the same type number