Create a Dynamic Reactive Angular Form with JSON

[@ChandimaChathura1990]

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!

[@jaywantnarwade5517]

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

[@RamShankar-pg9cu]

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.

[@DavidLopez-dk8il]

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.

[@_jn0298]

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.

[@ovuokeaghwotu2389]

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?

[@billblair3155]

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

[@123vimalan]

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

[@arturkhachatryan63]

Thank you, today less time spent :)

[@davidwang5445]

Great presentation. Just what I need. Thanks.

[@jeevanandam376]

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

[@martinjanuschke7274]

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

[@larryamisola]

Wonderful and very useful. Good work.

[@OlehBiblyi]

Very interesting, thank you!

[@davidhorne1017]

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

[@abdelhakamabdullah4512]

Excellent

[@ananthakrishnankrishnan7287]

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?

[@basilirzhak4276]

thank you ! :)

[@fejugaism]

Have you tried to combine this approach with typed forms?

[@balasubramanian9796]

Amazing

[@valeron_1337]

10:37 Do we really need to explicitly set the value for any of the inputs in the template ? I think it would only make sense to specify value for options in select if we had one.

[@TravisSomaroo]

How would you cater for forms that have nested form groups?

[@reneshankar]

Nice, I am working on a form builder, this would be of great help, thanks!. One question, what is the advantage of this approach over the angular dynamic forms?

[@JoshuaMorony]

Are you referring to an npm package? No particular advantage/disadvantage to this approach over using a 3rd party library, just depends on what you want/what you're trying to do/preferences etc. I tend to prefer rolling my own solutions if it's simple enough rather than introducing new dependencies into the project.

[@alampalli1]

what if there is a formArray. please cover it.

[@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.

[@DecentralEyes]

How would you extend this to include questionnaire data (also stored in a JSON file) where nested one-to-many data exist in the JSON, i.e, an array and a FormArray would be needed in the typescript ?

[@QhoirulAnwar]

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

[@shankil2975]

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?

[@Edwinil]

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

[@Feefor]

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

[@felixlucarodriguezponte6144]

Hi Josh amazing video was super helpfull. I am creating an application where I want to generate each page dynamically from a single json that specifies the elements that each view must have. And from this, generate that view with the specific data needed for each one. What is the most optimal way to do this in Angular?

[@leonelperez1943]

Te amo papu!

[@pratukale4599]

Can i pass events dynamically in JsonDataForm and how to call them?

[@DecentralEyes]

How do I style my form to look the same without using ionic ?

[@chinchillin2489]

I'm having with the Json file. I'm making a different file for my project, but when I try to put the file path of the json into my component for the form, it says my json file can't be found even though its in the project folder. I've been trying to do multiple file paths, but they all give the error. I'm so stuck and confused that it's frustrating.

[@edissongabriellopezsalaman9716]

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.

[@pawel_html5972]

Great but it is really hard to find generating deeper nested reactive forms.

[@SA-ie6lr]

I tried it in angular in this way but it is not working...May I know the reason or any solution for this problem.

[@Danny-er1sf]

Your using angular material ! I think, if u try without mat ..u will get it right ! Cheers if it helps

[@knagaraj5964]

Hi I'm following your videos. Please provide the video or guide need multiple dynamic form from josn. If click add button create form and update in json also. Please guide.

[@fullybangali]

how to use material instead of ionic

[@JohnnyChauque-d7g]

With the Dynamic form being loaded from the JSON, how are we going to handle the dropdown(Values), I mean population data into the dropdown and other thing is the conditional forms

[@cynthianwakaeme2331]

You can define a `type: select` in your JSON FORM, pass in a key-value pair options like this`options: [{key: string, value: string}]`, then use to loop through your options. Obviously this input field would be condtional. (That is, *ngIf = control.type === 'select)'. I hope this helps.

[@Thanishqrangampally]

@Joshua Morony. If I use ngOnChanges, "Property 'pluginConfigs' comes from an index signature, so it must be accessed with ['pluginConfigs']". Could you kindly let me know what could be the reason, and I do not have a Input variable, I am having an object for my JsonData. Kindly let me know. it would be very helpful. Thank you

[@Thanishqrangampally]

Could you kindly let me know the best way to reach you personally? Thank you.

[@ScottSansoni]

Hey mate ... this looks fantastic :-) Would it be valid to make this into a service to be used in any page/feature you want ie so the form controls json could be sourced from an api call, maybe with a fallback to a local json file? And maybe extended so you can specify which forms control file/data you want at the time of use? Would love to see how this could be accomplished ;-)

[@JoshuaMorony]

Hey Scott, there's no reason specifically that you would need to add a service here. The custom component in the video already supports passing in the JSON form data as an input, so you could grab that data however you wanted (locally or from an API) and pass it into the component. And you could certainly also add more inputs to the component if you wanted to allow more fine grained control over things.

[@ScottSansoni]

@@JoshuaMorony thanks Josh that makes sense. Will give it a go today :-)

[@designersperspective]

Hello, everything is working fine until I render form inputs dynamically in the template. I get a bunch of errors. mainly: Property formGroup is not provided by any applicable directives nor by form element Event ngSubmit is not emitted by any applicable directives nor by form element No directive is matched on attribute ngFor/ngIf and so on... Maybe you've got a solution? I need to hand in an app for university and I am kind of lost ...

[@bhanuprakashreddy4834]

This Reactive form Wrapper component is amazing but what if this controls have child and grandchild forgroups & formarrays 😢

[@yunus5949]

I wonder how they do the job of creating forms for thousands of products with various features on e-commerce sites like aliexpress or amazon. Are they using something like this?