How can I make ionic input to appear when choosing options from the ion-select without using OK button?
up vote
0
down vote
favorite
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. Please help me out.
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>
android angular mobile ionic3 hybrid-mobile-app
add a comment |
up vote
0
down vote
favorite
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. Please help me out.
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>
android angular mobile ionic3 hybrid-mobile-app
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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. Please help me out.
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>
android angular mobile ionic3 hybrid-mobile-app
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. Please help me out.
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>
android angular mobile ionic3 hybrid-mobile-app
android angular mobile ionic3 hybrid-mobile-app
asked 21 hours ago
Thedroider
175
175
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
2
down vote
accepted
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;
}
.., thanks it's worked!!!
– Thedroider
18 hours ago
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
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;
}
.., thanks it's worked!!!
– Thedroider
18 hours ago
add a comment |
up vote
2
down vote
accepted
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;
}
.., thanks it's worked!!!
– Thedroider
18 hours ago
add a comment |
up vote
2
down vote
accepted
up vote
2
down vote
accepted
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;
}
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;
}
answered 19 hours ago
Eray
475
475
.., thanks it's worked!!!
– Thedroider
18 hours ago
add a comment |
.., thanks it's worked!!!
– Thedroider
18 hours ago
.., thanks it's worked!!!
– Thedroider
18 hours ago
.., thanks it's worked!!!
– Thedroider
18 hours ago
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53237803%2fhow-can-i-make-ionic-input-to-appear-when-choosing-options-from-the-ion-select-w%23new-answer', 'question_page');
}
);
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password