Capture OK click event on ion-select

Ionic Framework ionic-v3
1

Has anyone got an example of how to capture the OK button click on a alert type ion-select.

The standard ionChange will fire if the selected value is changed but not if the user just clicks the OK button.

1 Like
2

there is handler prop that can be passed to create(). Alert’s API doc.

3

@Koleman thanks - will look into it when I have a chance.

4

@JAR19 How did you resolve this issue? I am having this issue too. I am using Ionic 3.2.0.

5

To be totally honest I stopped using the Alert and never had the chance to go back and look at it.

6

@Koleman, is there any example on how to customize the Ok button for ion-select? The issue I am trying to resolve is on clicking Ok button without selecting anything in the select box, an event should trigger and touched should be set to true so that I can add class that adds border around the select box.

Here is my html code:
<ion-item class=“custom-selection” [class.custom-highlight]="!accountTypeForm.controls.accountTypeId.valid && accountTypeForm.controls.accountTypeId.touched">

<ion-select formControlName=“accountTypeId”
[(ngModel)]=“accountTypeId”
(ionCancel)=“onAccountTypeCancel()”
(ionChange)=“onAccountTypeChange()”>
<ion-option *ngFor=“let accountType of accountTypes”
[selected]=“isAccountTypeSelected(accountType)”
[value]=“accountType.accountTypeId”>
{{ accountType.accountTypeLabel }}

1 Like
7

If i understand - you whant to validate somehow if user selected something from the list, but currenly ion-select doesnt support required or the ways to handle OK. For my uses I force to select 0 element from the list to prevent empty values - not good but coundnt find better solution.

8

Can you please share the approach you took to force the user to select element from selectbox? Did you customize the select? If you don’t mind, can you share your code?

9

something like this:

@Component({
  selector: 'page-test',
  templateUrl: 'test.html',
})
export class TestPage {
    someData: {
        label: string;
        value: number;
    }[];
    selected: number;
    constructor(){
         this.someData = [{
             label: 'Hello',
             value: 1
         }, {
             label: 'World',
             value: 2
         }];
         this.selected = this.someData[0].value;   
    }
}

<ion-item padding-right>
    <ion-label>Foo:</ion-label>
    <ion-select name="selected" [(ngModel)]="selected"  #selected="ngModel" >
    <ion-option *ngFor="let item of someData"  value="{{item.value}}">{{item.label}}</ion-option>
    </ion-select>
</ion-item>