Create form inputs dynamically based on JSON structure

Ionic Framework ionic-v3
1

Is it possible in Ionic2 to develop a plan to dynamically read a JSON structure (from a web service) and create a form based on those inputs?

Example data structure:

{
    "displayType": "text",  
    "label": "First Name",    
},
{
    "displayType": "textarea",  
    "label": "Description",    
}

I would like this json to create a form with two inputs - one text with label First Name and other textarea with label Description.
Please suggest how can this be achieved. Thanks in advance :+1:

2

You’re going to need to bind these elements to something, so I’m going to assume 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 [ngForOf]="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>
3

Thanks a lot for your response @rapropos It was helpful.

I think ion-input would work fairly for text and textarea, but I don’t think we can render checkboxes, radios or select boxes using this. I am working on making a resuable component to which I can just pass individual “field” object and it would render the corresponding input type for me. Please advise if we can better this.

4

Why not? I think it should generalize just fine.

5

Thanks @rapropos, I would mark it as the solution!

6

How to add button to this dynamic form.Normal syntax on button not working inside the loop