How to create dynamic form fields in runtime?

Ionic Framework Ionic Angular
1

Hi - I’ve designed a mobile data collection admin interface using Angular. It is a provision for users to design their own form fields. Now I am in the process of creating an ionic app for it. The app needs to dynamically display the form fields based on the json data. Would be great if you can share any resource, tutorials or a starting point. Thanks.

2

Try to start like this will be your JSON data -

{
"display Type" : "text",
"label" : "User name",
"name" : "username"
},
{
"display Type" : "email",
"label" : "Email",
"name" : "email"
}

You have to bind these elements to something, so assume like that each field has a unique name property, and you use those to build up a FormGroup in the controller.

<ng-template *ngFor="let field of fields">
<ion-item *ngIf="field.displayType === 'input'">
  <ion-label>{{field.label}}</ion-label>
  <ion-input [formControlName]="field.name"></ion-input>
</ion-item>
<ion-item *ngIf="field.displayType === 'textarea'">
  <ion-label>{{field.label}}</ion-label>
  <ion-textarea [formControlName]="field.name"></ion-textarea>
</ion-item>
</ng-template>