CODEWITHSUNDEEP
androidionic-frameworkionic4default-valueion-select
Unnati Patadia
Unnati Patadia

Reputation: 732

how to set value dynamically default value in ion-select-option

I'm using Ionic 4.
I want to show a default value in ion-select-option.
Option's values come from the server.
API works all values show but on click of ion-select.
But I want to show the default value.

I have already initialized userData.business_type in the constructor.
I have updated my question you can see that.
when my page load no value shown in ion-select only drop-down button show but when I click on the drop-down button then value shown.
But I want to show the first value by default when page visible to the user.

Response

 {"success":1,"service_details":[{"id":"1","name":"Job\/Service","status":"1"},
{"id":"2","name":"Student","status":"1"},{"id":"3","name":"House Wife","status":"1"},{"id":"4","name":"Business","status":"1"}]}

register.ts 

 userData = { "fname": "", "lname": "", "contact_no": "", "email_id": "", "password": "", 
 "business_type": "", "organization_name": "", "designation": "", };

constructor () { 
     this.userData.business_type = "1";
 }

getAllService(){
    let loading = this.loadingCtrl.create({
      spinner: 'circles',
      message: 'Please wait...'
    }).then(loading => loading.present());

    this.authService.getData("get_all_service_type.php").then((result) => {
      this.items = result;
        this.success = this.items.success;
        console.log(this.success);

        if (this.success == 1) {
          this.loadingCtrl.dismiss();
          this.serviceData = this.items.service_details;
          console.log(this.serviceData);
        } else {
          this.message = this.items.message;
          this.loadingCtrl.dismiss();
        }

    }, (err) => {
       this.loadingCtrl.dismiss();
      console.log("Error", err);
    });
  }

register.html

 <ion-item>
     <ion-label>Occupation </ion-label>
     <ion-select value="Job/Service" (ionChange)="optionsFn()" name="business_type" [(ngModel)]="userData.business_type">
         <div *ngFor="let item of serviceData">
             <ion-select-option value="{{item.id}}">{{item.name}}
             </ion-select-option>
         </div>
      </ion-select>
 </ion-item>

OR

<ion-item>
   <ion-label>Occupation</ion-label>
   <ion-select value="1" (ionChange)="optionsFn()" name="business_type" [(ngModel)]="userData.business_type">
        <ion-select-option *ngFor="let item of serviceData" value="{{item.id}}" [selected]="userData.business_type == item.name">{{item.name}}</ion-select-option>
   </ion-select>
</ion-item>

Upvotes: 3

Views: 10809

Answers (5)

Roy
Roy

Reputation: 19

In html

  <ion-item>
    <ion-label>Occupation</ion-label>
    <ion-select placeholder="Select Occupation" [formControl]="serviceForm.controls['typename']" interface="popover" (ionChange)="changType($event)" [compareWith]="compareFn">
      <ion-select-option *ngFor="let item of serviceData" [value]="item">{{item.name}}</ion-select-option>
    </ion-select>
  </ion-item>

As I always use angular reactive form module. I used formControl here instead of ngModel. And need to bind the whole object to the ion-select-option and use 'compareWith'. And also in your component do

 compareFn(e1: any, e2: any): boolean {
    return e1 && e2 ? e1.id == e2.id : e1 == e2;
  }

in ts also

this.serviceData.forEach(element => {
      if(element.id == this.userData.business_type) {
        this.appointmentForm.controls['typename'].patchValue(
          element
        )
      }
    });

Let me know if you are having any problem with this

Upvotes: 0

JUSTIN K XAVIER
JUSTIN K XAVIER

Reputation: 1

If Your ion-select-option values are loaded after setting the ion-select value, It won't show the default value selected. Since you use a backend service to fetch the select-options, better display the entire ion-select component after fetching all select-options by setting *ngIf condition

Upvotes: 0

Kathirpandian K
Kathirpandian K

Reputation: 354

I think this is rendering issue so i used a if condition to ion-select check this.

in .ts

serviceData = [];

in .html

 <ion-item>
     <ion-label>Occupation </ion-label>
     <ion-select *ngIf="serviceData.length" (ionChange)="optionsFn()" name="business_type" [(ngModel)]="userData.business_type">
         <ion-select-option *ngFor="let item of serviceData" [value]="item.id"> 
           {{item.name}}
         </ion-select-option>
      </ion-select>
 </ion-item>

Upvotes: 0

Neha Shah
Neha Shah

Reputation: 1247

There is issue of page rendering as when assing value to this.userData.business_type = "1"; that time array has not been loaded means this.serviceData value is not available.

for testing try to put 

constructor () { 

  setTimeout(() => {
         this.userData.business_type = "1";
  }, 2000);
 }

So let's load the getAllService function first and once response would come update this.userData.business_type value.

This will help you out.

Upvotes: 0

haron68
haron68

Reputation: 791

Your userData.business_type: '' has an empty value. If you want a default value, set this with a known default value.

// set business_type here
userData = { "fname": "", "lname": "", "contact_no": "", "email_id": "", "password": "", 
 "business_type": "1", "organization_name": "", "designation": "", };

constructor() {}

Also remove the unnecessary <div> in your html template.

 <ion-item>
     <ion-label>Occupation </ion-label>
     <ion-select (ionChange)="optionsFn()" name="business_type" [(ngModel)]="userData.business_type">
         <ion-select-option *ngFor="let item of serviceData" value="{{item.id}}"> 
           {{item.name}}
         </ion-select-option>
      </ion-select>
 </ion-item>

Upvotes: 0

Related Questions