Dynamic form in ionic

Ionic Framework ionic-v3
1

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 ?

2

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:

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

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

<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!!!

3

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

<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

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

Cheers!!

1 Like
4

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);
});
}