Angular 14 Reactive Form Validation | Angular Project | Authentication & Authorization Part 2 |

hello everyone welcome back to my channel so as you guys can see that we have completed the first part in the previous video okay where we have designed this um the login page and the signup page okay so if you haven't seen that video like how to create this beautiful form so you can go ahead on my youtube channel and you can watch this video where we have like covered all the like the basic things to create a good looking login and sign up page okay and as you can see this is like like where we have added the bootstrap and we have also used some point or some icons and whatnot okay so this is how the page looks like now now so this is the part two of authentication and authorization video where i am going to like teach you about validations okay so this lecture will be all about validations in angular where we will try to do validation for these two form fields and also for these five form fields okay so before starting the videos what is validation so validation is nothing but you want to restrict the form to get submitted to the back end okay so we will be performing some validation here for example if you try to click on login so it should uh throw some error here that hey you haven't filled the details and and you cannot continue something like that okay so to perform validation in angular so what all steps we need to follow again i will be talking in term of steps so that you guys can find it easy to to get those concept very clearly okay so step number one what we need to do guys so let's open up your visual studio code so i hope you guys have uh this thing ready already okay all right so let me first talk about for adding the validation the first thing we need to do is go inside your module okay and inside the module you need to import on a very important thing which is reactive forms module okay if i click here it's get auto imported okay can you see here on the top let's get auto imported the reactive form model which is coming from angular slash form so once this is there in the module after that we can um go ahead and do some coding inside your component okay but this was very important step to start with the angular form validations okay let's go inside your login module okay and we are going to uh inject few important things the first thing is form builder okay form builder so let's have a form builder and we will need a form group okay so we need a form group for example uh we are trying to group this form which is username and password so to group this form we require a form group so first let's give it a name to your form i'll give a name as login form so this is the property name and this will be of type form group okay so once we have a form group and we have form builder so now we can go ahead and initialize your form okay let me show you how so you just need to call this by this dot login form equals this dot fb your form builder dot and you get an option for group so in this way we are going to group our form okay so currently we are having only two fields so we will be only grouping two things in your application okay so the first thing we need to group is username and the second thing is your password so let's go here and type username the name of the form control is username and let's initialize it with a blank value and we will be also adding a validation so for that let's go here on this import and let's try to add the guy whose name is validative okay validator sorry s okay so once we have this validator so we can just say here validators dot require which means uh this field is required like without filling this field you cannot proceed further something like that so this is what require means okay so validator that requires same thing we need to do it for a password okay so for the password also you can copy paste or i'm just trying to type i love my keyboard i love to type trust me so here it is so we have validators dot require again so we need this thing for username and password both okay so that's how we uh put a validation so let's click on here to save all the changes okay and this gets compiled successfully okay so in this way so what we have did again let me repeat so first we have imported the reactive form module and then we bring in your your login component to import these three things from builder form group and validators then point number four point number three is to initialize like sorry declare your login form by giving the type as form group and then in the fourth step you need to inject the form builder and once these four steps are done after that you can initialize your form and you can group them okay something like that so once this is done i would say still we have not completed because we have did only on the typescript file so we have to uh imply same thing so that it's it is it it is yet completely used on your html as well so for that let's go on your form so if you have seen we have created this thing in that first part so we have this form ready so here in the form we need to say that we are using a form group and the form group name is login form okay so this name should match with this okay so please make a note okay so once we have this form group so what we need to do we just need to go below here and we just try to add the form control names for your inputs okay so we have two inputs so for the first input we need to say form form control i'm so sorry form control name and what is the formula name for this of course user name and let me copy this and let me paste here this is my password again please make a note this form control name should match with these names that we have created here okay what we have initialized here in the ng on edit okay all right now what is that so what else we need to do is so we need to display some errors as well right like if something fails so we need to display the error inside your html so to display the error message so what we will be keeping so let's use a small tag okay so this is a small tag where i'll say that um i can put a h-stick and i can say user name is required okay and same goes for this as well so so again we'll come down here like below this found where it ends ctrl v and we can just say your password is required okay sorry let me correct the name let me save it and let me just show you what how it looks on the ui okay can you see so it says username is required and password is required but i don't want to show it like and i think red color would be more appropriate to display this error so let's go ahead and do the changes accordingly so we are using bootstrap guys and i have shown how to configure bootstrap in the application so if you haven't seen it again go ahead and see the last video but that i have explained about that so we will be using a class called as text danger so this text danger class makes your text as a red color okay let me save it and then show it to you okay see now it looks perfect like we need this in red color all right okay so but uh i don't want to show this error right i don't want to show this initially like whenever the user clicks on this login button or whenever user start typing or he press back at that time i want to show this error i don't want to show it like because it doesn't make sense here okay if the person accidentally clicks login or if you start typing at that time only i need to display this so for that uh we need to do some conditional check okay so how we're going to do that so so this has to be hidden should be used on some conditions so let's put here as ng if okay ngf so ngif helps us to do those i didn't show thing in angular so what i'll do here is okay so please pay attention this is very important so what we are going to do we are going to hide and show how by the mean of your form so we have a form right we have a login form okay login form has a control so we have this term called as controls login form dot controls what is the control name we are looking for we are looking for username this is the form control name username okay if this form control is dirty okay if the form control name is dirty and i will have one more condition and if login form okay login form dot there is some method called as has error okay has error if this guy has an error called as required okay and for which control so you need to put the path for which path so where that we can put here so for user name if these two condition are true then only we need to display the error like we need to display that um error that username is required okay let me just show you here what i mean to say yeah this this thing so what you can do you can just try to like put it down so that it breaks or keep it like that only because i have zoomed the screen for you guys because i don't keep it this big so that's why okay so that's how it is so let me save it and let me show you what i try to mean so i have did only for the username okay let me go in the terminal and check if the compile success yes the compile is success and now if i go on the browser can you see i am not able to see username is required because i have that conditional check but if i start typing anything and if i go back can you see once i go back if the form is dirty then it throws the error but and there is also condition it is checking for required if i put anything which means there is some data but if there is no data then it displays this error username is required okay so this is what i wanted okay so let's try to do the same for your password okay it's going to be very easy so let me again copy this condition still here maybe yep let's copy this and let's paste it for this password okay but we need to change the controls so let's change the control to password and this as well to password now let's save it and now check can you see now we have no error senior so if you type something yeah the form is good if you go back can you see if the form is dirty and the form has like if there is no data present then it gives you the error called as password is required okay but still if you see that like some of the people uh try to do so let me share something with you guys so what people does is so people try to disable the button like if the button is disabled so they cannot fill the form okay so the button gets enabled only when the form is valid okay for example uh if i just show you here so let's go to your button where is that login button okay so here we have that login button so inside here if i try to add here as disabled so there is something called a disable and i can say login login form dot invalid okay so if form is invalid then it will disable the button can you see the form gets disabled and if i put here as some name and again some password you see the button gets enabled automatically if i again go back can you see the form is invalid and the button get disabled and we cannot click this so i'm not able to click so to click this login to do the login we need to put some password here okay so this is the one way of doing it okay like we can make use of this disable button and we can do but what i will try to demonstrate here is so we will not be doing that so we will be throwing error so once someone clicks on the login okay if someone clicks on the login so it will not allow your form to get submitted it will first through the error okay and then after that only uh you have to fill the details to to click and send data send data to your backend okay all right i hope that makes sense so let me uh like show you in term of practical work what i what okay all right so for that so we will be having a method here which is called when we click on the button okay let's say on submit so we have a method called as on submit let's create that method on submit okay so in this on submit we will be having our first condition if condition if if your login form is valid sorry just sorry it's just a valid if the login form is valid then it will do some logic like it will uh send the object to database okay if the form is valid but if the form is not valid then i need to throw the error through the error using booster and and with required field okay something like this i want to do all right so so this is what the logic says so if the form is valid then send the object database else through the error using toaster or or with the required fields something like that okay so let me first show you if the form is valid so what we can see so if i say console.log and i can say this dot login form dot value okay so if the login is success i want to console this data and if the login is the form is not valid then i want to display um form is not valid okay i'm going very slow just to explain you guys each and every step like what does all those things mean in angular okay so now let me just open up the console and let me zoom a bit for you guys okay this is okay okay so this is our console this is better so now if i try to fill some details so for example i put here by sheet3 0 my username and i put passwords some password here and if i click on login can you see i'm able to get my details like username and my password but but if i try to remove the password now my form is invalid and now if i try to click so can you see i'm getting form is not valid in the console which means this block is getting ran when the form is invalid okay and here we need to do some logic which i told you that if the user clicks on this login so please throw all the necessary errors and also a toast message or an alert okay let's see how we do that okay all right so whenever we we are getting an error so what we can do we can create a method called as validate all form okay so let's create a method called as validate all form let's create a private method called as validate validate all form fields okay so this guy will take something called as a form group of type form group okay so here we will try to write a logic which will throw those errors for us okay so what does that mean like whenever we are sending this record to the database so we will be taking that form group so there is something called as object let me show you object dot keys okay so i will try to check all the control names so for that i have this form group dot controls okay so this is an array it will check all the keys and it will take that key so this returns an array so for that we have a for each okay inside that we will check the field okay we'll check the field values okay now we check the control so let's create a clip const we have control equals now we get form group or form group dot get okay so we'll get the field so for that we will get the control of that okay once because this field will get repeated okay so now what will check if if if the control the control is instance of so we have something called as this instance of form control okay if this is instance of form control then you come inside this and try to make the control as dirty so we are trying to make all the control as dirty and for a dirty we have already a logic uh which shows you uh which shows you all those errors whenever the form gets dirty so it displays all the error okay so we have this to make as true so once we make this as a true so this error will get displayed like for the dirty field and what i mean is so once this field is dirty so we are displaying the error right so this is what i am trying to make i am trying to make the field dirty so once that is done then we have the another condition like lsafe okay so inside the else if we'll put one more condition if it is a form group so if the control is instance of okay if it is instance of form group okay then what i'll try to do i'll again try to say this dot validate all form fields and i will pass the control because now the control is of the type form group okay that's what this logic is going to do for us okay so now what we'll do whenever we have our else condition our form is invalid so we are just trying to put we are just trying to call this logic here okay so now to call that logic i'll go here and let's just call this validate all form fields and inside that i can pass the login form okay now let me save it and also i will add a alert for now your form is invalid let's see okay now i go here on the browser and now see the magic so now in the console let me remove this for now okay because we already have alert so there is no need of that console but if i try to click on login can you see i get sent a lot your form is invalid and and and i'm able to see this error as well that username is required and password is required okay okay i can try to make it uh look more good by changing the border colors okay so let's just try to focus there so i think i have already added the css for that file okay so let me just go here in the html okay and this is the input field which i can change okay i can change this input field so let me create a class binding so class dot error okay what will this error does so we need to again we need to show the control as a red color so again that again has to be shown when this condition is true or false so we can copy the whole condition okay and we can paste in here for displaying the error okay so this is very important guys so we are doing a class binding class dot error and for this error we have already written a css i'll just show you where is that exactly okay so this is done and again i need to do it for uh for the password is that okay sorry i did a small mistake so this class dot error is for the above no no this is good this one password i'm so sorry so i can just copy this and i can paste it for username as well so let's go here in the username input field and i can paste this all i need to do is need to change this to username and this also to username that's it and let's save the changes and now if you see if i try to click on login form is invalid wow this is so better so much better if you see now everything is in red color if i try to fill in the forms back to normal back to normal and now if i click on login so my form is valid and i can see the username and password which i have written okay so that's how we can implement the what we say the form validations and and how we can like configure them as well so this was the method which was very important to display all that error so this is the method so i would say this is one of the important method to have it to display the error on click of a submit button okay all right so now our form validation is is complete for your login so same i need to do it for your sign up okay so without any facing time let's start with the sign up page okay i guess if you guys want to try you can try it by your own you can pause this video and you can just give it a try to to do the same for the sign up form if you're able to do then please mention that in the video okay i want to see like how much people can like how many of you can follow my step while seeing the login thing if you guys are able to do that it's a big thumbs up from my end okay so i'll give you like some time so you can pause the video and you can do your job okay so i'll start with the signup form so i'll not take much time so as you guys know all those steps and yeah i want you guys to try it i hope you guys will make it okay so let me start with the signup form again so we have the first step already done the reactive form module is uploaded so let me first inject the form builder so i'll do that fb form builder in sign up you can skip this step if you have done it already okay but you can validate so whatever things you have changed if it is correct or not so we have form group signup group and signup form and the form builder let's go inside this and let's try to add your form okay so for for grouping it we need to have five fields so let me just do that very quickly okay so this is the same one okay so this is also done uh all i have to do is i have to use this signup form on the html so you guys know where i have to put so here in the form we have a form group so let's paste it here and now for all the input field i will have my form control name so this is my first name can copy this it here this is my last name this is my email this is my username and the last but not the least the password okay so here it is my password okay so again this form is also ready so all i need to do is just to put those error messages okay so for that error message again let me start from here so once the form ends we need to put the small tag okay so let me start from again small dot i can put the class as text center sorry text danger for it to look in red color and this will be like first name is required okay and i can copy the same and i can paste it for all the others so this is last name is required this will say email is required this will say username is required and the last is here password is required okay let's save it and let's see how it looks now okay so everything looks perfect now you know what you need to do you need to put it for the error message like the border for red color so again we have a class created class dot error and also we need to create that ng if condition okay so let me start again with the first name okay i'll do it i'll try to be very fast let's see [Music] completed all the steps like to do those validation and stuff like that okay so all we need to do again we just go here and we need to click the on submit we need to create that method again on sign up okay again we'll have the condition same same condition the sign up signup form dot valid if the form is valid perform logic for sign up and currently we'll just do a console.log to check if the form has the all of the data or not so for that again we just say here signup form dot value okay and in the else condition we will be checking the logic for for checking validation okay logic for checking validation or throwing error sorry logic for throwing here i'm so sorry for that form validation error so what i'll do i'll just try to copy the same logic okay what i had in the login component okay so i'll just try to copy the same thing and paste it here in the signup component okay and i'll try to um call that so let me import this first here and put it and let me call that thing here so again this dot validate all forms and i can pass the sign up form okay and i can click on save and all i need to do is just to call this method on this click of the submit button so we have a submit button down here somewhere okay here is the guy just create a click event and paste the method and let's click the save button and let's see the changes okay now if i click on the sign up can you see i'm able to see this errors and everything and also the form is not getting submitted because we are not uh putting that because this is the else block where we cannot send the data to the backend to save it in the database okay so that's how we do okay so what else we can target here is in this video is that if you see uh this this thing this is common this code is common for login as well as your signup okay and this is not a good practice to um what should i say it isn't a good practice to have a repetitive method like there is a principle of encoding we call it as dry don't repeat yourself okay so let's not try to repeat these two times or whether what we can do best is we can create a helper a helper class here so what we can do we can create a method called as validator so let's try to add a file okay inside that i'll add a file called as validate form form dot ts form dot ps file okay and this method is um let me export this because let's just say export default just like we do a static class and we create all those things right so that's what we are going to do so we have a validate form okay validate form class name okay and inside that i will have a static method so that's what i was trying to say we can just call the class like this method by its class name dot method name so what i can do is i can copy this method from here okay let me cut this let me remove this as well okay and let me paste this here okay now let's try to import this required things so let's click on quick fix to import and import the form control as well okay now this throws an error because we have removed it so what we can do is so we need to call this method so for calling this method we can just call the class name called as validator no sorry the validate form can you see this is the one validate form and then we can say dot date form dot the method name okay and if you see on the top it is imported as well this class is imported as well okay same thing we need to do here on the signup component as well so we don't require this anymore because now we have it on a common place which is our help helper class so let me remove this sorry helper folder not class again the validate form then we say dot and yeah so it will do our job so let's try to validate if things um are as expected as it was before so we have the signup field if i click on sign up yes it does the same job and same for the login if i click on login it says the form is invalid and yeah it does the same thing okay so what extra i want to do in this video is so let's try to add the toast messages in your application or or what i can do i can do that in the next video like it all depends because let's keep this video as dedicated to validation in angular okay so here we have tried to validate login and sign up page okay i hope you guys like followed all my step to achieve it because in the part three we will be like let me just show you what all this we have in the deck so point number one is done two is done and point number three is also done so let me change the status to done okay so now let's just discuss what are we going to do in the next video so in the next video we will be looking on how to create how to create the api for login and sign up okay so this will also involve some sql server database where we will be doing uh following code first approach to create our database okay so this is what we are going to target in the next video okay so maybe i will try to target these point number four and five okay so they look almost identical so we will create the api and we'll also try to integrate the api with your front end so that's all from this today's video where we have learned about forms in angular and how do we perform validations in angular i hope you guys have enjoyed this session on the validation if yes so please give it a thumbs up to me and also you can go ahead and share it with your friends and like so that they can also learn this thing like as you guys are doing okay so again if you have any questions related to this thing you can go ahead and connect with me on telegram or i also have my linkedin profile there you can connect with me on linkedin where we can discuss like anything related to tech stack okay so till the time bye bye and keep learning guys

Channel: Let's Program

Views: 26,320

Keywords:

Id: p9ScsROLjdI

Length: 37min 10sec (2230 seconds)

Published: Wed Sep 14 2022