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
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...
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
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
Update in PrimgNg
While setting default value for dropdown in Primeng need to be little careful.
<p-dropdown name="country" [options]="countries" [(ngModel)]="country" placeholder="select country" (onChange)="changeCountry()"></p-dropdown>
country
should be a number
not string.
You can typecast it, if it is a string.
country: Number("1");
Hope it helps.
来源:https://stackoverflow.com/questions/49623774/how-to-set-default-value-for-primeng-p-dropdown