Reactive Form Validation in Angular 17 | angular 17 tutorial

so welcome back to Learning Partner this is the next video where I'm going to explain how we validate the reactive form how do we create the reactive form not in detail just this video will be focused on the validation part only so I will just create a basic reactive form and then I will explain you like how do we validate so in the previous episode we have seen the same thing with the template form so this was the component so here you can see if I touch anything so required message is visible if I type anything then minimum character required is here same like for email also I have done this required then once I enter email ID is not proper if I provide the correct email ID then that message also going away so this is with template form now same thing whatever we used to whatever we have done in the template form same like that we have to do in the reactive form also so let's get started for that so this is again the form I have just using it from the bsh site so you you can also copy paste the same the code is already pushed in the repository so you can use that now let me just close everything so in the when we implemented the template form so template form obviously we start with the NG model so if we have to use the NG model obviously we have to use the fs model so this is an angular 17 so we don't get app model and there we can import all the dependencies so whatever you need you need to import that in your component itself so like that you can see in the template form component we have added forms model over here now so previously if you know if we have to use the reactive form model we used to UT the reactive form module so just like that here also you need to do the same so here reactive forms moduel you need to inut now first you need to create the form so template is very easy you can just create an object that and that object you can bind to the form but when it comes to creation of the what uh what when it comes to the reactive form there is a lot much code we have to write in the component than in the HTML so in the HTML also we have to write the code and ints also we have to write the code so so code will increase in case of reactive form so first just like we used to create the object ints just like that we have to create a form over here so first I'm creating user form variable and providing a data type of form group sorry from group so once I entered you can see it is it is automatically updated my import statement currently it will give the error like it is not initialized because obviously we have not initialized this error will be compilation error will be there for all the variable which which you create and you don't initialize it now I'm creating a Constructor now in Constructor I'm providing a values to my form values say in when we create the object in the template form so you you see this was an object inside that we had the properties just like that we have created a form and inside the form we need to create the control controls nothing but what are the fields I'm going to have in my particular form so in Constructor this do user form is equal to new form group now I'm initializing a form group I'm creating new form group so round backet col bracket enter so now you can see that error is gone because we have just initialized this particular variable this is nothing but a variable but we have stored the data type we have provided the data type like this is going to be a form so once we initialize that form the error is gone now we have created the form next thing is we have to create the controls in the uh in this form so what are the things we have in the form like first name last name username so that I will create so let's say first name colon now this is this is my first control so I have need to specify the data type also just like I have provided form group so this is my control so new form control sorry new should be in small form control so you can see it is suggesting once I select it will automatically add in the import statement new form control round bracket now this round bracket is having five Constructors you can see it is saying over here here so we can provide the initial value validation everything so many things we can do so this is how we create the control now next thing last name new from control let's say just like in the object also when we create we initialize some value we initialize with empty when in case of bull and we initialize with the bals same like that we can do the same thing over here so this is a place where you you need to initialize it so here I'm initializing it with empty just like this so whenever you create the control you can initialize that with empty value over here last name then email new form control just like that now it will be just the properties control name will get changed what else we had username city state and zip code this will be username City colon new form control round bracket let's initialize then State colon new form [Music] control from bracket and then zip code so code col new form control again to create the reactor form we can either uh create the react form by using form group or the form Builder Services also there by using that also you can create the same now this is how your form will look so first we need to create a variable with the data type form group then in the Constructor or in any another method you can initialize that form with the controls you are going to have or this same thing you can move it over here also like this same thing you can do it Al over here also but just just to keep the code proper we initialize variables in the Constructor so we are just following that so same thing instead of doing it over here I have done that in the Constructor so my form is created now comes part for the HM we haven't actually started with the validation first reactive form we are doing now in the HTML we had the form tag so here we need to add form group and here you need to provide the name of the form name of the pin which variable you have stored your form so my variable my form name is nothing but user form so this will go over here form group and you need to provide your form value now same thing in in template form we use to bind that particular uh element with NG model with that object do first name like this we used to bind but same thing now in reactive form what we you need to do is on each element you need to write form control form control types so we don't need it right form control name and here you just need to provide the control name so control name as in whatever the controls we have created so first name we'll go over here just like that I will just copy paste State now last name let's get the last name control name whatever the control name you give over here same thing you need to provide over here also then [Music] username let's just find the remaining thing also T City always try to copy paste so that you won't make the spelling mistake State and the last one is the zip code I think we forgot one that is for checkbox so let's create it is agree let's create this new form contr control let's initialize with false now so we in dots first we have created a form in the Constructor in the Constructor we have initialized all the controls and then in the HTML on the form tag first I have binded this form group and then in each element I have added the same control Name by using Form controller name so instead of NG model you use form control name over here and you just need to pass the control name what you have created in your form let's just save and check if everything is fine or not so this validation is not the validation we have added it is just the simple div I had added so no error is there means reactive form is proper now we need to do the validation so validation as in so in template form we used to provide the validation rules in the HTML itself but here you need to provide the HTML like what are the required uh how many rules for the validation you need to add that you will add it in the form itself because here you have created the form so here only you need to provide the validation also rules so that will be like so once you initialize the value after that give the uh comma then Square back in now here you can provide you can see validator options like what are the valid validators you need to add you can add it over here so for like I need to add a required so validators you can see once currently I don't have any uh in the import once I select this it is added over here validators do required I need so let's say for first name only one validation is there for the required let's go to last name again square bracket validators do required comma since it is an array like what are the number of validation you need to add you can add it over here now I need to add the minimum length so validators do Min length let's say main length at least four character just like that how we have done over there same like that you need to add it over here also correct now uh in the username we had added the validation uh for the email validation so here also we will do the same validators Dot required will be there and validators do email now in the reactive form you directly have the validation with email you don't need to pass your pattern or anything directly email validation is already there right so on first name last name and the username only on the three fields we have added the validation now how do we show the I mean how do we show the validation now on the front end side because we have added the validation but we need to show the message also now like this is for required minimum length is this on the front end side so here this is the D where we used to do that now here either you can do like this now same thing whatever we have did in the template form so here you can see we have added invalid touch dirty like the same thing it is available over here but just way of writing is something else now I need to use the form so first element like Star ngf I will use it again if you have to use the ngf you need to add the common modu let's go over here common module we have to add or you can use the NG so here user form dot controls Square backet single code and you need to pass your first name so this is like we are selecting particular control from my user form user form controls and which control I need so first name and here I will use dot touch property okay let's just try if this work if I touch this text boox this D should be visible let's just save all and let's test if it works now you can see I am not getting that d uh red color message over here but if I touch this text box and go away now it is visible means this is working fine so what we have did here from our control we have selected this particular control and we are checking like this control is touch or not the same thing what whatever we have did over there now same thing we are doing nothing new just the way of writing is something else so if we see the template form what else we have wred uh invalid touch dirty so three things we have written so just like that we will also return it over here so this is what we have selected do invalid and then we need to wrap that second thing with the round bracket either touch or dirty like this so let's check one more time if it is working fine either touch or dirty so you can see the validation but this is not the validation this is like only div is getting visible now we need to show the proper validation message so here instead of it I will use my span now here on the span again I will use starj now again same thing this will be same over everywhere dot errors I need to use and from errors again the same thing question mark dot which error we need required and if it uh in this particular element required error is there we will show like this is required let's just test if required is visible So currently we don't have anything but if I touch the required message is there but if I type something so that is also going away so required validation message is working after that we need the second check uh no let me check so on the first first name only we have added only one validation that is for required in the last name we have added required plus Min length also so let's go over there now if you see typing this same thing this is kind of repeating everywhere user form. getting the control name this is nothing but repeating so we can avoid this also we can avoid this how we can avoid this as in we can create a function which will return the particular control let me tell you how because this code will be very in HTML side we are writing so much of code this you can see it is getting repeated so many times so we can reduce this let me just first complete the basic with this flow then I will explain you like how you can reduce this so again so on this Ng star NG if first is like user form do controls dot square brackets single code and the control name that is last name right so now I will just copy paste this same thing just I need to change the control name just instead of the first name it will be last name over here or here now this D is done after that two span I'm going to need first for the required and second for the mean length so again I can use the same thing instead of first name it will be last name this is for required and second span I will be needing for the required validation sorry Min length validation so instead of required it will be minan length l n GT correct so how many characters we have said four characters you can see four characters so same message we will display it over here minimum four characters required let's save and check it now so you can see both the places we are not getting validation on the page load so if I type so if I just touch that so this is required is coming now if I enter some value another message is coming for the required like it is saying four characters are required so once I enter the four character that validation message is also going away so this is how we validate now the last thing pattern so email validation let's just copy paste the same thing paste it over here now for this control let's username username username now here we have not we have added the required also and the email also so here we will say username username first is required and second is the email validation and here we will just change the message like email is not proper let's just save and check if it is working so by default message is not coming if I touch required message is coming Jan atate gmail.com so you can see it is getting away the required message is going away along with the proper email format is also there so this is how you validate the form in in reactive form now again the same thing uh let's say I need to trigger this validation on my button click so this is how validations are there but if I click on the button this validation message should trigger let's just remove the remaining because that doesn't make sense let's me remove this what I mean to do is once I click the submit whatever the validations are there that should be triggered so for that again the same thing here instead of button let's create button I will create a function on click submit let's create this function now so in the normal uh template form we had created this form and then we have sent this form over here but this is a reactive form so already form value is over here so you don't need to pass it so here we can check the validation of the whole form also so constant is form valid I will check it like this do user form dot valid let's add a debugger now what I wanted to will you like first we will check the form is valid or not then we will trigger the validation on the submit also now over here debugger is on if I click on submit why it is not getting triggered we are facing some error on submit is not defined on submit on submit let's save all again now if I click on submit why it is saying onsubmit is not defined we have created the element sorry click function in the round bracket so once I click on it my function is getting called now here you can say currently my form is invalid because I haven't provided the required fi validation so let's provide it now I have provide all the required required Fields now if I click on submit now you can see form valid you are getting two so by this check you can see in the dotts also like if the form is valid or not now the second thing like if I directly click on submit my validation should figure so for that you can create a variable over here like is form submitted Boolean let's initialize with false and this variable we will make it true in this variable so this dot is equal to true so once we click the button we are just making this variable true and this same variable you can use it on this with an and condition like this let's just copy let's paste it let's just save it all and let's check one more time so once I click on submit we are just changing that variable to true so now why validation is not there it is not saved or what if this is true okay so we have added and so instead of and it should be or I forgot that either of the condition either this or any of any one of it let's try now by default it is visible what we did over there let's check one more time so first St valid so sorry uh that R condition should be inside our and so either of the any of three condition either this variable is true or it is touch or dirty so this will go inside the over here after this same after this also let's remove this now it should work fine let's save all so once I click on submit that variable variable get true and that is also provided in the or condition so you can see the validations are triggering but as this is a reactive form so we have so many things already available over here so you can see now rather than creating this variable okay so I'm using this variable and we'll be using the this variable for triggering the validation on the first name only now from last name and the email I'm removing this now there is one more way that is reactive way to use this so I can make this form as touched so that we can do like this dot user form dot set where it is do touch something is there mark As touch so this is the method which we can use so this will uh explicitly Mark all the controls as touch like all all the elements as TCH so you can see now without using this variable also in the last name and the username your validation get triggered so I'm click on submit why it is not still visible is this Mark as touch let's try with this not happening so what is the use of this a control is Touch by the focus and a blur event do not change the value when true Mark only the control when false not supplied is it a property let's try like this no this is not a property this is a function only but it's not working let's try one more time lot happening okay anyway so with using that variable also you can do the same thing but just by creating a variable again there are ways like we can use a for loop on the controls and Mark each control as touch but again the code will get complicated so just to keep this video simple I'm using the variable to trigger the validation right so this is how you validate the reactive form this is how you create the first you create the form then you add the controls to it then on the HTML side you provide the form group name over here on each element you can add the Form controller name and this is how you provide the validation so that's it with the current video

Channel: LEARNING PARTNER

Views: 5,990

Keywords: angular 17, angular 17 reactive form, reactive form validation, reactive form in angular, angular 17 reactive formvalidation, how to create reactive form angular 17, how to create reactive form angular, angular 17 forms, angular 17 forms validation, create reactive form angular 17, angular, angular 17 tutorial, angular 17 tutorial for beginners, angular 17 project, angular 17 new features, angular 17 full course, angular 17 routing, reactive form, validate reactive form

Id: kZAQ-IBO4qw

Length: 26min 42sec (1602 seconds)

Published: Mon Mar 04 2024