Create a Dynamic Reactive Angular Form with JSON

in this video we're going to build a custom component that will allow us to take some json data like this and automatically create a reactive angular form that looks like this whatever fields we define in our json will automatically be created in the form and we can even supply validators to it as well first we'll need to set up our json data source we are just going to create a static json file inside of our assets folder so this is an ionic application but you could do this with any kind of angular application so i'm going to create a file called myform.json and i'm going to paste in that data that we want to use as well as using a static file like this you could also load in this data from some external source as well now we will create our component by running ionic g component components forward slash json form and what we're going to create is a component that can take this json data as an input and automatically render the form for us so the first thing we're going to do is open up our newly constructed component and we are going to set up an input so we've set up json form data as an input and we've also set up the on push change detection strategy which i'm not going to talk about in this video but i will link to another tutorial that covers that now we're using an any type for our input here which we can do if we want but we know the shape of our data we have this rigidly defined data structure here so we can represent this more clearly with interfaces or types and what that will do for us is it will more strongly enforce the type of data that we're working with and it's going to allow vs code to provide us with code hints through intellisense so we can get some automatic completion and it's going to probably prevent us from making some mistakes i'm just going to add these interfaces directly into this file you can see we have quite a few here to represent the structure of our data but basically everything that is represented here just matches what we can supply in the json data now if you're not comfortable with creating your own typescript interfaces you can also come to this website transform.tools and if you go to the json section you can choose to type script and what you can do is just paste in what you want to create interfaces for and it's going to create a pretty accurate representation of what you need you might still need to fiddle around with what is required and not required but this will get you most of the way there and you might also notice that we are exporting this one interface that is because we're going to be making use of that in our home page component where we're loading the json data to give that a type of json form data so that's the only one we need to export from this file and then we can just give our input a type of json form data and now we have our type set up properly now before we get too carried away with actually building this component let's check that we can actually load in the data and pass it into this component first so what we're going to do is go to our home page and we're going to add the http client and our type that we created we're going to inject the http client we will set up an on init lifecycle hook a class member to hold on to the data that we're loading in which will have a type of json form data and then in our ng on init lifecycle hook we're just making a get request to load that form data we're subscribing to it and setting the result onto the form data class member so this will load in that json file and all of that data is going to be available through form data now since we are using http client we will need to add the http client module to our home page module so we will add that module since we'll be using the reactive forms module as well we are going to swap out the normal forms module with the reactive forms module and we're going to need to declare our component as well our json form component which we can just add to the declarations so with all of that set up we should be able to go to our home page now and i'm just going to simplify all of this we will drop in our json form component and we're going to supply that json form data input with the form data that we just loaded in in our home page and now that data should be available within our component now instead of using the on init lifecycle hook here what we're actually going to do is import the on changes life cycle hook and we're also going to need to import something called simple changes and then we are going to set up this ng on changes hook like this and we'll need to make sure we change that implements as well and so the idea here is that our input is going to change when the data has been loaded in via that http request it's not going to be available right away so by setting up this on changes lifecycle hook we can detect when that happens but this will also be triggered when the component is first being created so we check this changes value here to see if it's the first change and if it's the first change we don't want to do anything but if it's not we want to log out whatever this uh input is so we're going to save that and load it up in the browser just to check that we're getting everything that we think we're getting okay so we have the application running in the browser now and we can see that our component is loading fine but what we really want to see is if we're getting the data that we actually need so if we just pull up the console we can see that we're getting a console log here from our json form component which has all of the form controls that we want to create which have been loaded in from that json data source so we do have that data being received inside of that component now so now what we want to do is turn that data into a reactive form so we're going to head back into our component and we're going to add some additional inputs for our reactive forms we'll be using the form builder form groups and validators we'll inject the form builder through our constructor as fb and then we'll set up a new form group called my form and it's just going to be an empty group now all we really need to do is add controls to that form group so what we're going to do is create a new method called create form and that's going to take in our form controls it's going to loop over them and it's going to call the add control method on the form group for each control so we're looping through all of the controls from our data and then we are adding them to this form group so this is the basic idea but we haven't properly implemented this yet because there is an extra detail here that we need to discuss but before we get to that we will need to call this method from somewhere so what we're going to do is just swap out our console.log statement with a call to the createform method that's going to pass in the data that we actually want to create the controls from so this would be a nice and simple way to get this all working but the one flaw here is that it wouldn't support validators as it stands now this will add controls for each of the controls we defined in the json data and it will just set them up with an initial empty uh state but we also want to allow the ability to supply validators like whether it's required if there's a minimum length for the field a maximum length if an email is required or whatever any of the standard basic angular validators we want to support those so in order to do that we're going to have to add some additional custom logic so this makes the method quite a bit more complex but the basic idea of what we're doing now is still reasonably straightforward so we're still looping over all of our controls but now what we're doing is we're creating an array called validators to add and then we're looping over all of the entries inside of the validators object that is supplied and then we just check the key that is passed in which is the name of the validator so things like required or min length and if any of those are present we push the validator that matches that key into the validators to add array so if someone supplied a key of min we're going to push in the validators.min validator and we're going to also supply that with the value that they supplied to that key so we basically just do this for every single default angular validator and some of them do behave a bit differently like required for example doesn't have a value that is passed into it you just pass validators dot required directly but it's basically the same concept for every single one of these validators and then at the end we just have the same code that we had before we call add control we supply the control name and then we just create a new control with the form builder pass in the control value if there is one we'll set that as the default state for that control and then we just pass in the validators array as well so whilst we are here let's also add in a method for handling the submit so we just want a way to see the values when the form is submitted to make sure everything is working so this is going to tell us if the form is valid according to the validators that were supplied and it's going to give us all of the values for the form as well so our reactive form is set up now but we still need to actually render something out in the template and that will interact with this form as you can see right now there isn't anything actually on the page so again the basic idea is that we will loop over all of the controls that are supplied and we'll add an input in the template for each of them so we'll go to the template for our component and we're just going to create a standard form and inside of that we're going to loop over our ion items for every control that was supplied in that json form data and then we create an input for that and we just specify whatever type was supplied we set that onto the type we add the form control name to whatever was supplied as the name for that control and that's going to successfully hook that up with our reactive form and then if there was a value supplied we set that as well but once again just like with the problem that we just solved things aren't so simple so you can see we are getting some controls rendered out right now but we currently are only able to support basic ion inputs like text or telephone email that kind of stuff if we want to support more than that like text areas check boxes toggles ranges we will need to add in some more custom logic to handle those cases as well so again this is similar to the last case we are just checking what's being supplied and then we're doing the appropriate thing in response so now each of our inputs are going to have an ng if associated with it so we've changed our basic ion input to only render out if the type that is supplied is text password email number search tell or url and then we have these additional input components available so if a type of text area was supplied we render out the text area component for checkboxes we render our checkboxes toggles toggles and so on so some of these components do work a bit differently like the ion range for example has some different configuration options and this is something we also support in our json data if we go down to the range control we can see we can supply an optional options where we can configure those values so this controls the minimum and maximum value of that range as well as what icon should be used for the range slider and so this will allow us to support all of the uh default ionic inputs i think i've covered all of them here maybe i've missed one or two but you could extend this to include whatever sorts of controls you wanted to support so our form should now be complete so what i'm going to do is bring the console back up and we can see that all of our fields are rendering here so this is looking pretty good but we also want to check that the form actually works as well so what i'm going to do is just fill out some values here and we'll hit the submit button and you can see that we get our values being logged out so we have the validation state so the form is currently not valid and then we have the values that were supplied to all of our form controls so this is working exactly as we intended the reason the form is not valid is because the first name had a minimum requirement of 10 characters so if i just add in a few more characters here to make up that minimum and submit it again we should see that the form is now valid so now we can easily define a form of any length just by modifying a json file just to have a bit of fun with that and to show that this actually works let's just say we'll get rid of last name and comments we'll just delete that save and the form reloads and now those fields are gone we could change whatever validators we want we can add in more fields we can do whatever we want and our form is going to reflect that it's going to be a reactive form with all of the great features that uh reactive forms provide so this component doesn't support every possible thing you might want to do with your forms you might need to make some modifications to this to support that but we're most of the way there already and the basic concept should be able to be extended to support just about anything so i'll leave a link to the source code for this application as well as an expanded article on the concepts here that'll be in the description as well as some additional resources for some things we didn't talk about like the on push change strategy okay so i hope you enjoyed this tutorial if you did do feel free to leave a like and subscribe and i will see you in the next one you

Channel: Joshua Morony

Views: 53,330

Keywords: ionic, tutorial, tutorials, ionic tutorials, ionic framework, coding, coding tutorials, angular, angular tutorials, cordova, cordova tutorials, capacitor tutorials, mobile, mobile apps, apps, html5, ios, android, native, hybrid, pwa, web apps, progressive web applications, programming, ionic 5, react, stenciljs, stencil, performance, ui, ux, animations, screencast

Id: ByHw_RMjkKM

Length: 14min 46sec (886 seconds)

Published: Thu Jul 08 2021