# Dynamic form in ionic

**URL:** <https://forum.ionicframework.com/t/dynamic-form-in-ionic/119325>\
**Category:** ionic-v3\
**Created:** [January 24, 2018, 8:10pm UTC](https://forum.ionicframework.com/t/dynamic-form-in-ionic/119325 "2018-01-24T20:10:55Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![josechepe](https://avatars.discourse-cdn.com/v4/letter/j/b5ac83/32.png) [@josechepe](https://forum.ionicframework.com/u/josechepe)\
**Post date:** [January 24, 2018, 8:10pm UTC](https://forum.ionicframework.com/t/dynamic-form-in-ionic/119325/1 "2018-01-24T20:10:56Z")

</div>

Hey everyone, I have a dynamic form that changes depending of a param that comes from the database, so i need to catch de data that the user puts in the different inputs, so any idea how could I bind the users answers ?

---

<div class="post-metadata">

**Author:** ![umerf6455](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/umerf6455/32/147397_2.png) [@umerf6455](https://forum.ionicframework.com/u/umerf6455)\
**Post date:** [January 25, 2018, 9:36am UTC](https://forum.ionicframework.com/t/dynamic-form-in-ionic/119325/2 "2018-01-25T09:36:48Z")

</div>

Hi @josechepe, If you have some input fields and a button on which you want to store/catch values you entered in input fields then here is the solution, It worked for me:

```auto
<ion-input type="text" placeholder="Whatever you want" [(ngModel)]="SomeName"></ion-input>

```

then on your button click, you can catch values as:

```auto
<button ion-button (click)="yourFunction(SomeName)">Pass Values</button> 

```

Now you can write a function in .ts file named as yourFunction(someParamName) and catch your value in its parameter. You can send more than one values comma separated and can get in your function respectively and can do whatever you want to. Hope it helps. Please let me know if you find any confusion or the solution doesn’t work.  
Cheers!!!

---

<div class="post-metadata">

**Author:** ![josechepe](https://avatars.discourse-cdn.com/v4/letter/j/b5ac83/32.png) [@josechepe](https://forum.ionicframework.com/u/josechepe)\
**Post date:** [January 25, 2018, 8:58pm UTC](https://forum.ionicframework.com/t/dynamic-form-in-ionic/119325/3 "2018-01-25T20:58:19Z")

</div>

Hey man, thaks for replying.

I found other way creating a new attribute to each objetc I get from the database, so I created the form using those elements so I have to bind like this [(ngModel)]=data.reply, so reply is the new attribute in the object.

the HTML

```auto
<ion-spinner class="center" *ngIf="loading"></ion-spinner>
      <div *ngFor="let params of paramsPage">
        <!-- type LISTA -->
        <ion-item class="input" *ngIf="params.description == 'LISTA'">
            <ion-label color="light">{{params.name}}</ion-label>
            <ion-select [(ngModel)]="params.reply">
              <ion-option *ngFor="let list of params.lista">{{list.value}}</ion-option>
            </ion-select>
          </ion-item>

          <!-- type NUMBER -->
          <ion-item class="input" *ngIf="params.description == 'NUMBER'">
              <ion-label floating color="light">{{params.name}}</ion-label>
              <ion-input type="tel" [(ngModel)]="params.reply"></ion-input>
            </ion-item>

```

the .ts

```auto
 this.rest.reportList(element.sql_dynamic).then(datos => {
           
              element["reply"] = "";
              this.paramsPage.push(element);

```

Cheers!!

---

<div class="post-metadata">

**Author:** ![henrisco82](https://avatars.discourse-cdn.com/v4/letter/h/41988e/32.png) [@henrisco82](https://forum.ionicframework.com/u/henrisco82)\
**Post date:** [February 23, 2018, 8:13pm UTC](https://forum.ionicframework.com/t/dynamic-form-in-ionic/119325/4 "2018-02-23T20:13:34Z")

</div>

Hi @umerf6455 I am having the same kind of issue. I tried your solution but the ngModel binds the ion input text all together. please how can I fix this? Thanks

```
<form (ngSubmit)="submitResponse(names)">
            <div *ngFor="let questionnaire of questionnaires;" >
              
                <div *ngFor="let item of questionnaire.item;" >
                   <ion-label> {{ item.prefix }} &nbsp; {{ item.text }} </ion-label>  
                       <div *ngIf="item.type == 'boolean'" >
                        <ion-list>
                          <ion-item>
                            <ion-label>{{ item.option.valueBoolean[0] }}</ion-label>
                            <ion-radio ></ion-radio>
                          </ion-item>
                          <ion-item>
                            <ion-label>{{ item.option.valueBoolean[1] }}</ion-label>
                            <ion-radio ></ion-radio>
                          </ion-item>
                      </ion-list>
                       </div>
                       <div *ngIf="item.type == 'string'" >
                          <ion-item>
                            <ion-input type="text" [(ngModel)]="names" name="names"> </ion-input>
                          </ion-item>
                       </div>
                       
                </div>

```

and the ts file

@Component({  
selector: ‘questions’,  
templateUrl: ‘questions.html’  
})  
export class QuestionsPage implements OnInit {

```
 questionnaires: any; 

```

constructor(  
public navCtrl: NavController,  
private userapi: UserApi,  
private questionnaireapi: QuestionnaireApi,  
private questionnaireresponseapi: QuestionnaireResponseApi  
)  
{ }

ngOnInit(){  
this.questionnaireapi.find().subscribe((data)=\>{  
this.questionnaires = data;  
},(error)=\>{  
console.log(error);  
});

}

submitResponse(names){  
console.log(names);  
this.questionnaireresponseapi.create(this.questionnaires).subscribe((data)=\>{  
this.questionnaires = data;  
console.log(this.questionnaires);  
},(error)=\>{  
console.log(error);  
});  
}

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:53pm UTC](https://forum.ionicframework.com/t/dynamic-form-in-ionic/119325/5 "2021-07-19T21:53:17Z")

</div>

Closed on July 19, 2021, 9:53pm UTC