Ionic: Adding form fields dynamically

Ionic Framework ionic-v3
1

Hey,
i’m looking to add input field dynamically, is it possible? someone has example how to do that?
for example when i choose from my select options 2 input field it shows me and one i choose 5 input fields it shows me
5 input fields.

2

You can bind the selected option to a variable:

Then you can add components dynamically with *ngFor or *ngIf using this variable:
https://angular.io/docs/ts/latest/guide/structural-directives.html

3

@i know using *ngFor *ngIf but how it help me?
how can i do that?

4

For example, lets suppose you have a variable called someVariable.

First you bind your input container to someVariable.

  <ion-item>
    <ion-label fixed>Field 1</ion-label>
    <ion-input type="text" value=""></ion-input>
  </ion-item>

  <ion-item *ngIf="someVariable === 'value1'">
    <ion-label fixed>Field 2</ion-label>
    <ion-input type="text" value=""></ion-input>
  </ion-item>

</ion-list>

Then you bind your select to someVariable:

<ion-item>
  <ion-label>Options</ion-label>
  <ion-select [(ngModel)]="someVariable">
    <ion-option value="value1" selected="true">Option 1</ion-option>
    <ion-option value="value2">Option 2</ion-option>
  </ion-select>
</ion-item>
1 Like
5

that’s good but let’s suppose i have 8 options and if user choose option 5 so it shows his 5 input fields, how can i do that?

6

in addition if i do that, i need to declare variables dynamically because option 5 value i need to assign to specific variable.

7

@addwebsolution have help in this code, hope this is what you wanted.

8

Can anyone help in resolving this?