Country Code Selector

Ionic Framework
1

We all use ion-select for selection field such as Country Code,etc
suppose i have Country Code list and i bind it with ion-select.

 <ion-select [(ngModel)]="selectedCode" (ionChange)="FilterItems()" style="min-width:100%;">
      <ion-option value="1"> +91 - India</ion-option>
      <ion-option value="2"> +1 - America</ion-option>
      <ion-option value="3"> +971 - Dubai</ion-option>
 </ion-select>

now if i select any one of above option from list it will display full text in form

+91 - India

and i want to display only country code

+91

so which is best way to achieve this kind of functionality in my form

2 
countries:any = [
{
  code: '+91',
  name: 'India'
},
{
  code: '+1',
  name: 'America'
}
];

And then:

<ion-select [(ngModel)]="selectedCode" (ionChange)="FilterItems()">
  <ion-option value="{{c.code}}" *ngFor="let c of countries">{{c.name}}</ion-option>
</ion-select>
1 Like
3

thank for your answer but its not work.
i think we have to set *ngFor in ion-option :sweat_smile:

<ion-select [(ngModel)]="selectedCode" (ionChange)="FilterItems()">
  <ion-option  *ngFor="let c of countries" value="{{c.code}}">{{c.name}}</ion-option>
</ion-select>

i already try this and it will display India or America in form

Capture

4

and finally i done it with few patches :smile:

<ion-item (click)="openSelect()">
   <ion-label stacked>Select Country</ion-label>
   <ion-input [(ngModel)]="selectedCode"></ion-input>
</ion-item>
<ion-item style="display: none">
    <ion-label>Select Country</ion-label>
    <ion-select #select1 [(ngModel)]="selectedCode">
      <ion-option *ngFor="let c of countries" value="{{c.code}}">{{c.name}}</ion-option>
    </ion-select>
</ion-item>

and code

 @ViewChild('select1') select1: Select;
 countries: any = [
    {
      code: '+91',
      name: 'India'
    },
    {
      code: '+1',
      name: 'America'
    }
  ];

 openSelect() {
    setTimeout(() => {
      this.select1.open();
    }, 150);
  }
5

:thinking:

My bad! Hurry to write, I wrote wrong. But Iā€™m glad you solved it!

1 Like