Ion-select - Can I disable/re-enable the OK button?


#1

I am using the ion-select many places where the first time it is opened there is no selection yet. In this case I would like to disable the OK button, and then enable it as soon as the user selects an option.

Is there an easy way to do this ( I can’t see any option in the doco)

Thanks in advance!


#2

Hi @peterjc

I have tried some work around for your requirement, Please try it and let us know it works fine or not.

HTML

<ion-item>
  <ion-label>Gender</ion-label>
  <ion-select [(ngModel)]="gender" (ngModelChange)="func(gender)">
    <ion-option value="f" >Female</ion-option>
    <ion-option value="m">Male</ion-option>
  </ion-select>
</ion-item>

<button ion-button round outline [disabled]="disableBtn">Okay</button> 

TS

export class ContactPage {
  gender: string;
  disableBtn: boolean;
  constructor(public navCtrl: NavController, public alertCtrl: AlertController) {
    if (this.gender == null){
      this.disableBtn =true;
    }
  }

  func(gend){
    if (gend != null || gend != "")
    {
      this.disableBtn=false;
    }
  }
}

#3

Thanks for the reply, but I actually meant the ok button on the select popup window, not another button on the page (see image below)


#4

How do you create this “popup” as you call it? If you had provided a code example, it would be easier for us to understand what you did and what you want to do.


#5

Can see an example of creating the select here, that has the following markup…

	<ion-header>
	  <ion-navbar>
		<ion-title>{{ appName }}</ion-title>
	  </ion-navbar>
	</ion-header>

	<ion-content padding>
	   <ion-item> 
		<ion-select>
		   <ion-option>Option 1</ion-option>
		   <ion-option>Option 2</ion-option>
		   <ion-option>Option 3</ion-option>
		</ion-select>
	  </ion-item>
	</ion-content

It is just the stock ion-select.

The popup has no selections, so I want to disable the OK button.


#6

@peterjc Did you figure out how to disable Ok button until something is selected?


#7

No not yet. I have left it for the time being. Would still like to get it done though.