Myujth

I am using ion-select to let the user to select the options, and inside ion-option there contains a list of options from which the user chooses one. If the user chooses "Others" option, an input appears automatically, so that the user types the option that is not available in the drop down.

Now I need to use the ion-select without OK and CANCEL buttons. Since I have already implemented, I need to show the ion-input field to appear automatically when the user chooses the "Others" option. This logic is working correctly, if I am using with OK & CANCEL button.

Now I need to implement the same logic without OK & CANCEL buttons. The ion-input appears only if the user chooses the "Others" options and clicking on "OK" button. Since I don't want to use any buttons here, I want the "Others" ion-input field to appear directly as soon as the user chooses the "Others" option in the drop-down without pressing the OK button.

Here's what I have tried so far, in my HTML:

<ion-select class="mydate" formControlName="bankselect" [(ngModel)]="vm.bankselect" interface="popover" (ionChange) = "bankChange($event)" class="textcolor" value="bank">
 <ion-option *ngFor="let item of banklist; let i =index" value="i">item.value</ion-option>
 </ion-select>

<ion-item no-lines *ngIf = "vm.bankselect == 6">
 <ion-icon class="iconstyle" name="logo-bitcoin" item-start></ion-icon>
 <ion-label floating color="primary">Others</ion-label>
 <ion-input type="text" (ionChange)="notify($event)" class="textcolor" formControlName = "Others" [(ngModel)]="vm.Others" maxlength="50" tabindex="1" (keyup)="moveFocus($event,query, false)"></ion-input> 
 </ion-item>

I'm not sure but maybe you should try (ionSelect).

in your .html file should be like this.

 <ion-select "some codes...">
 <ion-option *ngFor="...." "some codes..." (ionSelect)="showInput(item.value)"></ion-option>
 </ion-select>

<ion-item no-lines *ngIf = "show">
 <ion-icon class="iconstyle" name="logo-bitcoin" item-start></ion-icon>
 <ion-label floating color="primary">Others</ion-label>
 <ion-input type="text" (ionChange)="notify($event)" class="textcolor" formControlName = "Others" [(ngModel)]="vm.Others" maxlength="50" tabindex="1" (keyup)="moveFocus($event,query, false)"></ion-input> 
 </ion-item>

and .ts file

show: boolean = false;

showInput(item)
if(item == 'other')
this.show = true;

else
this.show = false;