CODEWITHSUNDEEP
typescriptangularionic2
Ankit Maheshwari
Ankit Maheshwari

Reputation: 1680

ionic2 show input field when other option is selected from select box

Using Ionic2 and Angular2, I want to give user an option to enter profession when they select option 'Other' from select box.

Example of Select:

enter image description here

Here is the code:

	<ion-item>
		<ion-label>Select Profession</ion-label>
		<ion-select [(ngModel)]="userType">
			<ion-option *ngFor="let ut of userTypeList" [value]="ut.value" [innerHTML]="ut.label"></ion-option>
		</ion-select>
	</ion-item>

Upvotes: 2

Views: 2577

Answers (1)

sebaferreras
sebaferreras

Reputation: 44669

You could use the userType property and show the input when its value is equal to the value of the other option:

<ion-item>
  <ion-label>Select Profession</ion-label>
  <ion-select [(ngModel)]="userType">
    <ion-option *ngFor="let ut of userTypeList" [value]="ut.value" [innerHTML]="ut.label"></ion-option>
  </ion-select>
</ion-item>

<ion-item *ngIf="userType == 'otherOptionValue'">
  <ion-label>Detail</ion-label>
  <ion-input type="text"></ion-input>
</ion-item>

Upvotes: 2

Related Questions