Create a Dynamic Reactive Angular Form with JSON

In this video, we create a component that allows you to define form controls in a JSON file and then dynamically create a reactive Angular form from that JSON file.

0:00 Introduction
0:20 Setting up JSON Data
0:47 Creating the Component
1:22 Interfaces
2:58 Loading JSON data
5:56 Creating Reactive Form
9:44 Creating Inputs
12:28 Using the Form

#ionic #angular #json

[ChandimaChathura]

This is really nice to see. I'm working on a large-scale angular project for two years now. And happy to say the whole project runs with this base. This is really coming in handy when you are gonna have many forms in the project. Adding this JSON structure and standard component calling template selectors to the custom code snippets makes the productivity goes high in the sky, believe me. Nice content!

[martinjanuschke]

great work! one of the best and "easy to follow" tuts regarding dynamic forms... many thx!

[vimalan]

Thank you so much Joshua. Can’t describe how helpful this is. Great stuff.

[DavidLopez-dkil]

This is a better solution then what I was originally looking for… very nice can’t wait to get back to my desktop and try this out for myself.

[davidwang]

Great presentation. Just what I need. Thanks.

[billblair]

Thank You, Very Much, Joshua. This is exactly what I needed instruction on.

[jaywantnarwade]

easy step explanation, covering all scenarios regarding dynamic form . Nice work

[_jn]

i remember doing something like this in a project, it had columns support, something like this [{control}, {control}] it even had selects with server-side options using the async pipe and dynamic formgrups.

[RamShankar-pgcu]

Amazing innovative idea. You can simulate this to generate multiple forms by just defining the json config and load it dynamically. one question is how to specify List and combo boxes and load it from database and setting values to controls from database.

[jeevanandam]

Thanks.. Nice video Joshua.. really useful. Could you please upload 1 more video for formArray with events bindings from JSON file configuration ?

[Feefor]

Thanks Joshua, geat video.
How would go about adding fieldsets dynamically into the layout, so you can create accessible sections throughout the form?

[ovuokeaghwotu]

I love your videos and the additional discussions under every one of them - they have all been very helpful.
Please, do your courses Angular have Purchasing Power Parity?

[shankil]

Excellent video. I am building a similar app @ work for determining product offering based on suitability. Since we have a few products to offer, the JSON structure needs to reflect a decision tree with leaf nodes as the products. While I can use your approach to store questions in JSON, the missing functionality is - How do I render a set of questions based on the answers to one or more questions?

[ananthakrishnankrishnan]

Just one small help. Given that the HTML is built dynamically, is it possible to control the actual layout? For example first and last name in one row, then email in row 2 etc etc. Given that the Json form data could have anything, how can we control display. The reason behind my question is I want to create a single presentation component for my detail forms which could receive any json array. Is there a way to do this?
Also if there is a drop down which needs server data, how can that be accomplished in this design?

[QhoirulAnwar]

nice tutorial,
what if i want to add selection on form?

[edissongabriellopezsalaman]

Hi @Josgua
Your video really helped me a lot, thank you.

I just have a question about how the push works when it is min and max I see that you only use it in a Button radio, but you access and do not use validators and I do not understand how to use them because currently the form returns true in a number type input, I hope you can help me can you help.

[chipsmanml]

Hi Joshua, may you (or anybody else) give us a hint how we can pass the value type of control from a JSON (string variable) as a generic param of a typed FormControl<> (Typed forms introduced in A14). Thanks in advance.

[davidhorne]

Any tips on linking controls? eg if selecting some options in a multi-select needs to drive a selection in another control, or limits what data is available in the second control

[Edwinil]

I going to try to replicate it in stencil/web components. thanks

[alampalli]

what if there is a formArray. please cover it.