Hide multiple input box on entered number

i have one ion-select which is having 1 to 10 value in ion-option.

<ion-label> Select how many input fields</ion-label>
<ion-select> 
<ion-option value="0"> Zero</ion-option>
<ion-option value="1"> One</ion-option>
.
.
.
<ion-option value="10"> Ten</ion-option>
 </ion-select>

After that i have have 10 input box to display.


<ion-input formControlName="1_box"></ion-input>
..
.
.
.<ion-input formControlName="10_box"></ion-input>

I need to hide all if ion-option == 0, And display the input box on the basis of quantity selected in n ion-select.

It means display only 4 input box if ion-select 4.

Thanks

1 Like

you can use ngIf directive on your ion-input component. lets say you store your ion-option value in a variable named inputCount, then you could have

<ion-input *ngIf="inputCount >= 1" formControlName="1_box"></ion-input>
.
.
.
.
<ion-input *ngIf="inputCount >= 10" formControlName="10_box"></ion-input>

Thanks Amin… got it :smile:

1 Like