How to Create a Dynamic Angular Form from JSON within Ionic

Today we generate a reactive Angular form based on JSON information including the Ionic UI with dynamic form elements!

#############################

👨‍💻 Want to read instead of watch?

😱 NEW: Capacitor Crash Course!

⚡️Take my famous 7 Day Ionic Crash Course

🤷‍♂️Want more Ionic tutorials?

#############################

❤️You can also find me...

Or join our Facebook group:

#############################

00:00 Intro
01:01 App Setup
01:45 JSON to Form logic
07:50 Dynamic Ionic Form
14:16 JSON with Groups and Array
21:33 Template with Dynamic Form Array
33:44 Outro

[luismpcunha]

Great tutorial, very helpful when retrieving form field rules from a backoffice.

[mikha]

if you guys want only display the delete button only when new group was add. do it like this <ion-button expand="full" color="danger" fill="clear" (click)="removeArrayGroup(c.key, i)" *ngIf="i >=1">
<ion-icon name="trash"></ion-icon>
</ion-button>

[TheSaceone]

Done some things like that in the past and it's always kind of a mess. Nice an clean tutorial on this topic, which I think is very useful when you have server driven apps. With these things in mind is not difficult to go further and render the full UI following a json file from an API. In fact I followed another great tutorial of yours about dynamic components when working on these kind of things. But nothing unusual, Simon always helping!! 😂😂😂

By the way contratulations on those +37k subs!

[dominicbachmann]

Hey Simon, cool video👍🏻 Teachers of me started playing your videos in class btw.😄

[konasandeep]

This was a great video .. How can we add custom validations and cascading dropdowns

[ReadyVred]

thanks! it's nice tutorial simon, but how about validator error messages ? can we custom it and put in json to ? would love to see this tutorial

[compellingwisdom]

Pls simon could u add a dynamic select field to this tutorial or show me how pls..

[FreddyMande]

17:37 is there a specific reason to why you didn't use forEach?

[ddancorp]

I would love being part of ionic academy, but in Brazil Dólar is to expensive :(

[ibgib]

Going through this myself and your video is a huge help. So HUGE THANKS.

Btw, is there a difference in using the new ctors (like `new FormControl()`) instead of using the injected FormBuilder's functions?

Coincidentally, that was talking yesterday with the Ionic community, we mentioned the topic of Formly, why not use it? Or what would be the difference?

[narongme]

how to connect to metamask
can you sample for implement with smart contract

[RamyOsmanBadr]

How to user realtime database with ionic and mysql bro
Is websocket?? or there any way ??

[muendakhuthadzo]

I am doing some things like that in my project right now. but I went two-step in by adding a form array inside another form array with a form-group. But I'm getting an error (Error: cannot find control name). I am stuck for a week. PLEASE HELP....

[moatazal-ali]

Hi, thank you for all videos, if you can helpe me ... when i loading page useing ion-router-link, my app page loaded in twice time ... and all api its loaded more and more time when i usin ion-router-link with ion-search ... i need a help to resolve this problem .. loaded page twice time when i use ion-router-link

[ivinantony]

How can we add a variants in products for an e-commerce application? Could you please add a video with this

[saq.ib]

need same examples with more options for example: ion-select, ion-radio, ion-checkbox etc.

[stopPlannedObsolescence]

Can't bind to 'formGroup' since it isn't a known property of 'form' in <form [formGroup]="myForm">

[ivinantony]

Please add a video of braintree payment integration in ionic 5

[prashantsaini]

can we make a value as default selected in this? like i have a country and there dial code as json data and i want suppose India as default selected then how can we make it? also is it possible like the drop list i make country name visible and after selecting only its dial code will be visible? @simon grimm