balaji balaji - 6 months ago 88
TypeScript Question

Show input field when specific option is selected from select box - Ionic2

When I select on option, I want to show a input text tag.

html code

<ion-item >
<ion-label floating>TIN/GRN NO</ion-label>
<ion-select [(ngModel)]="num">
<ion-option *ngFor="let nom of list" value="{{nom.value}}" checked=" {{nom.checked}}" [innerHTML]="nom.label">{{nom.text}}</ion-option>
<ion-item *ngIf="num == 'true'">
<ion-input type="text"></ion-input>

ts file

num = 'true';
list: Array<{ value: number, text: string, checked: boolean }> = [];

this.list.push({ value: 1, text: 'TIN NO', checked: false });
this.list.push({ value: 2, text: 'GRN NO' , checked: false });


Since you're doing <ion-select [(ngModel)]="num"> the num property will have the values 1 or 2 (not true or false) so in your view you need to compare against those values:

  <ion-item *ngIf="num == 1">
     <ion-input type="text"></ion-input>