Angular Reactive Forms with Validation | Part-4

hello guys and welcome back to my youtube channel and in today's video we are going to start a brand new section in our angular form tutorial series and the today section will be dedicated to reactive forms so in the last three videos we have covered about template driven forms how to create a template driven form from this crash and then validations and a lot of the stuff on it now we are going to repeat the same stuffs for reactive form now reactive form is something that you might have seen earlier in my other videos because in other tutorials wherever I use a form I actually use the tree active form approach and that is something I also recommend you if you have a very simple form you can go with that template driven approach but if you have anything little bit complex I would suggest going with the reactive form approach because of the control it provides you in handling your form from the type of script now so to start with let's see what are the topics that we are going to discuss today so we are going to look onto some of the key concepts of reactive form like form builder to create our form from scratch then the from group form controls later we will see how we can do a one-way and two-way binding in the reactive forms we will also see how to update the values from the type of profile on our controls then at the later stage we will go into the validations how to provide the out of box validation to our reactive form and then providing custom styling and showing the error messages based upon the state of a control so it is going to be a video full of information about the reactive forms and it will be like almost half of the reactive form will be covered into this and in the next video are we talking about custom validations so I would suggest you guys to watch this video till the end and if you guys will like this video please go hit the like button and subscribe to my channel so without wasting much time lets directly start creating our first reactive form so going back to over vs code let me close this files which I have opened earlier and I am going to open the first thing that is half more dill tortillas and to work with reactive form we have to include a module called reactive forms module so just like the forms module I am going to bring reactive forms module and this model will be imported from add the rate angular forms so just like for module I will bring reactive forms module so that is the change that you have to perform in your app module tortillas and then I will close this app module tortillas and move to our reactive form component so in the component the first thing I am going to do is I have to inject a form builder service so I will create a private variable of type form builder and this form builder has to come from again angular form so I am going to import it and now the form builder is imported it's time to create our first reactive form so I will name my form as reactive form and it will be of type firm group and then in ng on in it I am going to initialize this variable now this form group is again going to be imported from form builder so I am going to include that also okay and now let's initialize our reactive form so form builder actually provides three properties you can create a form attic using the array a form control using the control method and a group using the group method so I will simply use the group method and here in the curly braces we can provide the controls that we want to add so I will just name the controls the first one as first name and the syntax for this is something like this so what this actual is square bracket denotes I am going to tell you so this square bracket can be divided into two section with the help of comma so the left hand of the comma is actually the initial value that you want to pass for your control suppose I want to pass my name to the first name at the initial level I can place this thing over here on the left hand side of the comma in the square bracket while the right hand side of this square bracket will contain some configuration options and one of them is the validations that we are going to use so you will simply pause the validators on the right hand side but you will see all of this much more in detail right now I will just leave it blank and then I will add all the other fields now in the previous video we have seen that we have the all the controls under the address property so address will be like a nested form in itself so what we can do is we can make an address key over here and that will be again a firm group in itself so we can do this every dot group and all the controls related to the address can rest inside this group so I will just simply name them the first one is headrest type so this is all this is our complete reactive form that we have created in our type of script file so we have so we have the controls over here first name last name then we have a nested form group inside of a form group and then the controls of that nested form glow so now it is time to bind this particular form to our HTML so let me take you to my reactive form HTML and the first thing that we have to do is we have to search for the form tag that is present over here and here we are going to bind with the property called form group now it is very important you have to bind it like this and here I am going to pass the name of my form group which is very active form so this is actually same as the name of our form group over here which is reactive form so once we have binded this reactive form now it's time to bind the controls so in template driven form we use ng model but here we are going to use the attributes form control name so when you have a form control name in place then you don't need to use the name tag of HTML so here I haven't used the name tag but sometimes you may find few of the controls with name something like that so you just don't have to use it you can simply replace this whole thing with form control name and remember one thing even if you have a name tag along with the form control name then the value of these tools should be same otherwise you will receive an error in your console so this is the point to be remembered now let's add this I will pass the control name that is first name and then I will just copy this whole thing for second name also and here I will do last name okay so these are the two properties that are directly available under our reactive form now all the controls under the address are actually part of our subgroup form that is address form groups so it is a form group inside a forum so to use these controls to be binded the first thing that we have to do is we have to provide this form group to the address section so here the address begins so this div actually wrap arounds all the controls of the address so here we are going to use a property called form group name so remember earlier it was form group to which you have binding our form but when we have a nested form groups we use form group name and here I will pass the name of the form group that is nested that is address and now I can use the firm control name attribute over here so here in this example of at this table you can see I have the name option so if I'm going to use form control name and if I pass address type has the name then I have to replace this with the same value otherwise it will give an error so either it should be like this or I can simply remove this name property from the HTML then again for the second one I will do it like that only I will just remove this name property and over here sorry I will just copy this form control name and add it away here so now let me add this form control name property to the other field quickly okay so I have added the firm control name property to all of the controls and I will save both of this file and before that I will just create a little bit function to log our form with the name of submit handler and here I'm going to do console dot log then this dot reactive form and I will just call this method from the submit button click event okay now with this let's get back to a browser and check whatever form is logging okay so I will open the inspector now one thing you should notice here is that the street control over here that is drop-down is not showing the default choose option that we have earlier so in template driven form by default this particular value was displayed when nothing was chosen but here it is not there and we will fix this soon but let's first add the values and see what actually our form is giving us permanent let's add the expiry date also is some value address anything it doesn't matter and let's hit submit so you can see here is a form group now in this form groups again we have the controls so you can see all the controls that are part of the address form group are wrapped under the address property and here we again have the controls address type and if we go below over here we have a value of permanent so we will have value for others also to check the value directly what we can do we can go to the value property of our form group directly and you can see this is the values that we got back at the sky permanent city burn expiry date okay state the street address is a toad and name so that means that our form group has been binded well with our HTML and now let's get back and fix this state default value settings so the problem that happens with our select box is that by default this choose option was marked selected but now as we have binded this particular thing to over reactive form with the control name of a straight so its value will be chosen upon the value that is state control has and now if I go back to the reactive form type a script he will see that the state has an empty square bracket that means its value is null so if any option has the value of null that will be selected by default so to make this particular option has a value of null what we can do here is we can use ng value attribute and we will bind it with null now let's save this and let it compile and get back to the browser you can see that the default value has come back as the default option for third-straight so we have binded our reactive form now let's see how we can pass the value to reactive form in a one-way binding in two-way binding approach so lets us discuss about the one-way binding and for that I'm going back to my type of script file I will create a simple variable over here I will call it a user and it will be actually JSON object so I will have F name just like the previous example I will name it Bob and then he'll name with the value of something like Jack or something I don't know what name will be good but let's make this one okay so this variable is declared so now for a one-way binding when you want to pass the value at the initial level you can just do one thing you can simply go here when you're declaring the reactive form you can do user dot F name and this thing will work sorry it is going to be this dot here so this is going to work if we get back to a browser you see that the value of Bob has been passed to a first name controlled by default so this way you can do a simple one-way binding now suppose you want to create a two-way binding what we can do so for the two-way binding we are going to use the same approach that we have used in the template driven form so to demonstrate one-way and two-way binding together I will pass this dot user dot he'll name to the last name and to demonstrate it more clearly I will log the initial value of this user variable and then I will log the value once we hit the submit button after changing the value in our control so here I'm going to log just right I have the initialization level of ng on in it and I will name it initial value and here I will long this dot user okay sorry I just add a comma by mistake okay and then add the submit button and we just comment out this thing and I will use console dot log and this will like say as final value and here also I am going to lock this user and now let us get back to over HTML so the first name and last name currently have by default the one we're binding because I am passing the values using this syntax to the form group at the initialization level so these value are binded actually to the first name and last name control but suppose we want to add a two-way binding to the first name property what we are going to do is we are going to simply use the ng model syntax that we have earlier and I will bind it to user dot s name now if any change is done on the first name control the value will be reflected back to the user F name property and we can see this if we get back to the browser okay so you can see that the initial value is logged over here with the name of Bob and Jack now let us change the value in our both the controls so I will name it with my name and let's hit submit button see the final value for the first name has changed but for the last name it remains the same what it was so this way we can build a two-way binding in the reactive form so the last name control is only one way binded while the first name control is a two way binded now the next section is really important okay so now we are moving to the next part of our video and that is validations and that is a very interesting topic so like we have used the out of box validator in our template driven form now I am going to demonstrate how to use those validators like required pattern min length and others in your reactive forms so let's get back to over vs code now to use a validator in reactive from we don't have to do anything in the HTML like earlier we have to provide in template driven form something like required or pattern over here but for a reactive form we have to do nothing in the HTML part actually we will get back to the type script and the place where we are initializing a form here we have to pass the validators so as I told you in this square bracket the first part is the value that we want to use now I will just simply replace this with null because I do not want to demonstrate the binding anymore so the first part is value and I am going to pass the initial value of the control as null and the next part is validator so angular provides by default validators which are available in the HTML and you can use them using this validators property which have all the validators that are provided out of course like email max max an Earthman and i am going to use required now we can add one validator like this but here we have to use two validators one is the required and the other is min length so what we can do we can grab this validator and make it as an array using the square bracket and then with the comma I can pass another validator and that will be Milind and as mid-length is a method I will pass the value of to so this way we have added our first validator to the first-name control and it will be having a validation was required and mill length and then I'm going to pass the validator to all of the fields so I will just replace the value with null but I can simply just copy this whole stuff because this is the thing that we are going to use for everywhere having just paste and I am skipping the expiry date because that is something we will deal in the custom validation and I will tell you why okay so now the zip code will again have to validators one is required and the other is validators dot pattern and in the pattern also we can simply pass the regex as the parameter to this method so i will simply use the same pattern that we use earlier a five digit number patter and that is all so our rejects is ready so now before moving to the browser I will just comment out this console line and move to the submit handler I will again comment out this and I will uncomment our reactive form now let's save this and get back to our browser and see what happens if we actually submit or log our form without properly filling the values and you will see that the Bob value is actually appearing even with removed the value from / form declaration and that is because on the first name control we have used the ng model so it is binding that value from there so I have to remove it again from here so let's do this quickly and now let's get back to the browser like it suppose just like this if I hit submit here you can see our form group and you can simply see that if the status is invalid and if you go to any of the control like suppose last name you will see it has an error so that means the validations are working even we can check it for the nested group that is a dress and if I go for City here you can see that the error of require type is available and the status as in Val and the valid value is false so that means the validations are working now we have applied the proper validations now it's time to provide the custom is styling using the ng class now I'm going to demonstrate the custom styling only on one of the controls and you can use the same approach to style all of the controls later or you can directly download the final project from the github the link for which is available under the description box so that you can see what actual codes for ng class attribute is applied on each of the controls in this form because if I go on applying the ng class attribute with the custom styling on each of the control it will consume much of the time so I will just keep it simple to one control and then you can use the same approach for the others and I'm going to do it for the most complex part that is the properties that are inside the address form group so I will use it for zip code so let's move to the zip code okay so here is a words if code and we have to use ng class now do ng class you're aware that I have already demonstrated the syntax in template driven form also so it is like curly braces then the class name and we have the class of form control that should be applied always so it is true and we can then get rid of this class it is no no more needed naturally it will clash if you don't remove it and now we need to provide a class of his invalid when the control is invalid and I will pass the condition later and similarly of his valid when the control is valid so now this is invalid class should be applied when this control zip code is not valid or it's valid property is false and we also make sure that this control actually has a touch property to be true so that it doesn't apply from the very start now somehow we need to access to this zip code control instance so if he are aware in the template driven form what we did is we just knit thing like zip code is equal to ng model something like this and then we can use the zip code variable for getting their stands to the form control but for the reactive form the approach is slightly different for that we can create a get property inside our type script and that is because for the first name and last name control if we require we can simply do reactive form controls dot first name and that will give us the instance of the first name control but as the zip code is nested inside other component for the other form group it will be something like controls dot address then again controls then again zip code and even if you do it like this such a lengthy syntax it will not work and that is because the control property is available under the forum we'll class and while reactive form controls dot address returns a control of abstract control class so that is something complex you don't have to deal with what is actually happening and I will demonstrate you more specific into the title script when we go so to get the instance of the zip code we have to actually create a getter method so let's get back to the type of script and over here I am going to create a get property and that will be zip code now to get the axis half of a zip code form control I am going to write this dot reactive form dot controls you can see that I am getting all the intelligence and inside the controls I need to get headrests now you can see that this address is actually of class abstract and I try to do controls again on it it won't work like that now what I have to tell to angular is that this particular control is a fight form group so I will simply add form group fasting to this and I'm saying this thing to a variable called them just for more understanding making it to a multi line and then what I can do is I can simply return the control drop here so I will use temp dot controls and then I can simply pal zip code so this approach will work the only issue with this is right now actually it is temp isn't from group which is of type more specific to constant as we have not changing the value so I will rename it to constant and just removes the steer salento issue okay so this code will now written as the zip code control and I can use this property directly in our HTML now if you want to use it in typescript you can use it directly like any instance variable like this dot zip code it will be available so you don't have issues so this Gator actually works as simple instance variable so you can use like this dot zip code in title script while in HTML we are going to use it simply without this so let's get back to the HTML part and here I'm going to type zip code and valid should be false so now radically what I have seen some people doing like this false and it is totally fine there is nothing wrong with this syntax because this is a boolean which you are comparing with a boolean but that is a little bit lengthy radically as this is a boolean property in itself true or false you can simply use it directly and because the value of this zip code dot valid will be added to or false I will just put an odd operator so if it is invalid then apply this class and along with this what we are going to do is we are going to use the touch property should be true so this class will be applied on these two conditions I will simply copy this code and pass through the is valid and I will just remove this not operator so that get supplied when the control is invalid is straight okay so now with this ng class ready we can even get rid of this zip code - because the control will become valid only when somebody will type some value so it will never be valid from the initial level so I will just remove that case and now we have to work on this message that we are getting back so as you know where we have two different validations one is for the pattern and other is for the required so I will just replicate this line two times and I will change this message to value should be five digit number and Here I am going to use ng F and it will be zip code dot error and if the error is of type required display this and same way if the error is of type pattern you have to display this line and again as the error is available from the start we have to use the stretch property so I will again use this as an additional condition to this so you could see that it is much more similar to what we have done in the template driven form but actually the more canpolat provide is in the way of accessing the form in our type of script file so let's save this complete code of HTML and now let's get back to the browser and see how our zip code controls behave so you could see simply that the zip code error message has gone by default if I do a blur event you can see that the error has come up now if I type something okay the error message is getting changed and if I do something like five digit number it is becoming valid and if I log it right now you could see that the control address again controls in zip code is invalid State okay so see this is how simple it is to apply the validations to a reactive form and you must have seen that it is very much similar to the template driven approach except the part that you have to access the control instance using a getter method so you can use this approach what I have shown you in zip code to apply for all other fields in this reactive form or as I already told you you can get the working code from github and the link is available in the description box and you can check the code and play around with that so now with this thing I'm almost from the completion of this video now the one thing that I want to mention you right here is that I have not applied any validation on this expiry date control and the reason for that is this expiry date control I want to make validate only when user has chosen the address type as temporary so if it is of type permanent I just don't want to actually show this control at all this will be hidden and when user chose a temperate he address type then only expiry date should come on the screen or should be displayed and then the validation of required type should be applied on it and now as this particular control is dependent upon the address type control you cannot apply a direct out of box validator of type required so for that we have to go for a custom validator and that we will see in the next video so guys I hope you like this video so please go hit the like button subscribe to my channel if you have any questions or suggestion please post it in the comment section and I will see you next time thank you

Channel: Azhar Husain

Views: 11,202

Rating: 4.9405942 out of 5

Keywords: angular reactive form, reactive forms module, angular 6 reactive forms, angular reactive form validation, angular reactive form custom validation, angular forms tutorial, angular 6, angular 2 tutorial, web development, how to create forms in angular, adding validations in angular forms, angular forms course, angular 5

Id: pVgF-pUT6sE

Length: 30min 27sec (1827 seconds)

Published: Wed Aug 01 2018