Create form inputs dynamically based on JSON structure


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:


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-input [formControlName]=""></ion-input>
<ion-item *ngIf="field.displayType === 'textarea'">
  <ion-textarea [formControlName]=""></ion-textarea>


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.


Why not? I think it should generalize just fine.


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


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