Template Form Validation in Angular 17 | angular 17 tutorial

hello all so welcome back to Learning Partner so in this video we are going to see how we can do form validation with template form so when we talk about angular we have two types of form template and the reactive so in this video specific to template form we are going to see how we valid validate the form in coming videos again I will be taking the same thing with reactive form also the project I have created is with angular 17 so the new things whatever there are in the angular 17 that also we will discuss now so if you see the form this form I have just used it from the bootstrap site only so this was the form I have I'm using now this form we need to validate so what I have did now let me just close everything so if you can see I have just created an empty project so this is with angular 17 with with Standalone component so here we don't get the app module so we get the app config app route I have created just two component so I have created the routes for the same in app route. TS in app. config sorry in app. component. HTML I have added my nowar and beside the now after the now bar I have the router outl so that whatever the activated component is there that is getting loaded over here now so in template form validation so this is the HTML code what I have just copy pasted from the bootst site now here what we need to do first like what are the fields we have that object we need to create obviously when we have a form in angular so we bind that form with a specific object so let's create that object first so we let's go Tots in this variable you can see we will create let's say user obj colon any or instead of any let's create the interface also so export or let's skip that because that is not focused so I'm going with any only now here we need to create the properties whatever we have so first name last name username so let's create this properties first name poon I will initialize with empty last name colon empty username empty then what else we have so city state and the zip code so after that City empty then we have state colon mty and zip code empty and one more thing for the agre terms so one Boolean variable I have to create so that will be is agre colon with false VAR so whatever the fields I have in my form like that I have created the object so after creating this object we need to bind this object with specific properties to all the input element right so using NG model so we are talking about template form validation so obviously in template form validation we go with uh NG model so this object will go over here so this is my first text box so here I have to add square bracket round bracket NG model is equal to object dot my property name so property name will be first name so if you see here we are getting the error so error will be cannot bind to cannot bind NG model since it is known property of input so if you remember in previous version if you have to use the NG model we used to import fals model in our app model but now we don't have app model over here so now this is the new thing like Standalone component so whatever you need to use in the Standalone component that you need to import in the component itself so we can go tots and here you can see we get you get the import statement so here you just need to add forms module now if I save now you can see error is gone because I have used and I have used false model in my component so now I can use the NG model so whatever you use whatever you want to use you need to import that that is the first rule now just like this I need to bind all the fields so let me just copy paste for now city state ZIP code and the check box let's just bind the properties also agree zip code will go over here State over here City always try to copy paste the field name because if you make the spelling mistake then you won't be able to resolve the issues it won't throw any error but but you won't also be getting the right output so always try to copy paste the field name so we have created the object that object we have binded to the form properly now let's see if we get any error we should get one error let me just explain you that so if we go to console here you will get error something like this if NG model is used within a form tag either a name attribute or name attribute must be set or the form control must be defined as a standalone in NG model option so this error you will get if your form is inside the form tag and inside the form tag if you are using NG model so now right now you can see we have used NG model directive inside the form tag so whenever you are using NG model directive inside the form tag the name attribute becomes mandatory this name attribute so here you just have to add the same property so now I'm just copy pasting let me just copy paste wherever you are using the NG model now their name property you need to add now what you need to pass the same property which you have binded to the N model that's it let me just do this then we will see the error will be gone username last name let's save now if you see let me just continue so in the console you you going you don't get to see that error because we have added name property all the input element so let's try to remove one let's try to remove the state one save it again again you will get to see that error so as I said wherever you are using NG model so that is very self-explanatory you can see either you can do this or you can use this but normally we don't use this we just add the name property so wherever you are using NG model name property becomes mandatory but if if you are if you are not using the elements inside the form tag then name attribute is not mandatory so we have seen two errors how to use uh false model over here and why to use the name property now validation when it comes to template form validation all the validation rule we set in the HTML only so like this required then let's say Min length I need to set so minan length let's say I need at least three characters then here main length at least five characters then we can set the pattern also for in case of email so let's just search the email pattern email pattern regex let's specific to angular let just go to stack Overflow we just need the pattern to validate the email this is very long long one we need the easy one let's try this if it works so this pattern we will add it on the email text box so we have okay username is nothing but that so let's add it over here so just like this minan length max length required pattern all validation first you need to add it over here like this after that you need to show the valid Val messages also so currently if you if we save let me just show you so these validation message are coming by default but if we are entering it is not going away because this is just a static only you can see this is just a static now when it comes to template form validation what you need to do first thing you need to create a hash property so over here hash and then you need to create any variable name so let's say first name same property I'm using is equal to and inside this property you need to store NG model so what is the meaning of this we are creating a variable on the front end this is nothing sorry on the HTML side in the template so this is like creating a variable and in this variable what we are storing we are using equal to sign means it we are assigning so whatever the data we have in this NG model directory that we are storing over here now this you can use over here so this D should be visible if first I will uh tell you like the validation message should be like uh whatever the validation message we have added right validation rule so mean length and the required so only two validations are there that is this text box is mandatory and it should have at least three character so now inside this I will create a span first message like this is required let me just copy paste second message will be minimum length three character minimum three characters needed so I have two messages first is like for the mandatory and second is for the minimum character so let's just save currently we haven't done anything so you can see both message are both messages are visible but this messages should be and even if I type this messages should be hidden so and at a time only one validation message should be visible either required if I have not provided any input in inside this text box only this is required validation message should be visible but if I type something this should be hidden and only this should be visible up till uh whatever the required character I'm not entering so now we have created a hash property over here now this hash propt property we can use on this pan using with NG if so NG if is equal to now here we need to add this dot errors first uh we will get an error like ngf direct was used in the template so with the previous version if we have to use the NG for NG bar we didn't need to uh import anything but it is angular 17 so whatever you use that you need to import so NG comes from the common moduel so in Imports you need to add common moduel like this now that error will gone away now let me just first print what do we get in this first name with Json type let's just save let me just remove this first I need to Showcase like what do we get in this first name okay so for pipe let's see what do we need to use for pipe how do use Jon P let's save so if you have to use the pipe also there also you need to add but it will show yeah I thought it so if you try to print the object of this now you will get circular error so here instead of this first name dot errors is what I want to show you so errors So currently you can see over here we are getting something like required true but if I pass a value then it got changed to Min length let me just comment this and let's see it properly so what I have done the hash variable what I have created that I have used over here and out of that a errors I'm errors I'm trying to access let's sa so here you can see by default we are getting something object we are getting and inside that object required property is there with the value true but if I enter that is going away and another object is coming that is with mean length and message also like required me is character and actual length is one so these are nothing but the errors we have in this particular NG model so now same we can use so first name. error let's uncomment this now let's remove this so now on this NG if first name. errors dot required but it will it will throw the error because it says like we have to access this property in this signature with square bracket so let's copy we can we can access object either using dot property or using the square bracket also so so instead of dot we have to use like this now it will say like it can be null or unexpected let's see for that also we need to add so it is saying like object is possibly null so that's because it is saying like you can you are reading a data from a null object means first name do error can be null now so that's why we need to add question mark and then dot so this becomes like if it is not null then only we will try to read the required property so this is for required let's copy paste this and other will be Min Len let's save and check now so currently you can see on the page load we are just getting this is required so we have two span this is required and the Min L three characters but on the page load we are just getting the this is required if I type so now error message got changed minimum three characters needed if I provide three character then that message is also also going away means we are validating our particular element properly let's remove everything so on the P if we don't have anything you are getting this is required if you type anything second message will be there and if you provide the prev valid input that is also going away so this is how we validate the input but if you see over here if I refresh by default also this message is coming by default this message should not be visible either if I touch this then only it should come now by default this message should not be visible first let's remove the remaining one it is getting confusing let me just comment let's just remove so now if you see on the page load we are getting this is required normally if you have seen any form if you are refilling any form we don't get validation once the page load either if we click on submit or if we clicked and go away then only Val validation message should be triggered so now to handle this scenario what we have to do in the this first name property you get a prop in this first name hash property you will get a property that we will add it over here on the parent de so NG if equal to to this dot invalid okay so invalid is a property you get and one more two more properties you need to add first name do touched or dirty these two things you can add either it is invalid either it is touch or it is dirty so these things you can add now if I save so on the page load we W be able to see that but now if I clicked and go away now the message is coming means user has touched that text box but didn't enter the value uh didn't enter any value so now validation message will get triggered so this is how your validation message textbox should look what you need to do you need to create a hash property the name can be anything either you can use this only or anything this is like creating a variable so you can create anything but in this way hash property what you need to store NG model and after the text box you will be creating a parent de there you will add a text danger just to add a red color or something on that de you need to add a this NG condition with invalid first name. touch first name. dirty with r then respective validation this pan was required this pan is required uh to show just the validation message for the mandatory then this is for required because on this textbox we have just added two validation mean length and the request now let's just try for this email so now same thing again you need to create a hash property over here let's say email is equal to what you need to store NG model now over here let's uncomment this now first forther over here so star NG if what we need to do so email do invalid we need to use and then in the r bracket you need to use email. Touch property or it is dirty then here we can create a message that is span stng if now in this text box we have added a pattern so for pattern you will get to you have to add email. errors question mark dot square bracket inside that you need to pass pattern then here we will say email ID is not proper let's just save and check this now we are talking about this so if I touch wait something is wrong email is invalid email not touch why it is not displaying let's SA let me just inspect why that D is not visible it is visible okay so that D is visible so here you can see let me just reload again so if I mm let's reload again I just need to show you that D is visible or not just a second so this is our username textbox so here this div is there after that one more div will be visible this du so if I touch so this D is visible but outs of that we are not entering the wrong password so here you can see email ID so validation message is coming okay now we need to check like if we provide the correct email address that validation message should not be visible so let's add Jan at theate dy. so you can see once we enter the proper email address then it is going away [Music] gmail.com so see if I provide the correct email address that message is going away because on this field we have not entered the required validation message so let's just copy paste instead of required it will be instead of pattern it will bequ required this is or let's just add a required so now if I touch and go away now required validation message is coming but if I enter some data another message is coming like email ID not proper if I enter proper email address that is also going away so this is how we do the validation in template form you need to create a hash property and using that hash property you can just use the for the different element now one more thing if I refresh and if I submit the form once I click on submit then my if I'm not touching anything let's say click on let's reload if I didn't touch any liit that validation message won't be visible but if I click then my validation element validation should trigger right if user doesn't doesn't touch any element how how he will know like we need to show the validation message right so once I click on submit my validation message should trigger so how do we handle that so to do that on this button click element just a simple trick I have to create one more variable is form submitted I'm just creating a variable with data type bullion I'm initializing with false value now on this button click what I need to do I just need to call that function I just need to call a function so click on submit just a function I'm creating now let's create this function now once I click on the submit button this function will be call and in this function I'm just making this variable true now user will get to know we get to know like once user submit this variable is getting true now this variable I have to use over here on the parent if condition if this is true and this and with this or so now or we need to pass this variable so let's just copy this over here and over here also so only two fields we have validating so let's save now if I click on submit you can see validation messages is getting triggered obviously required will come other message won't be visible because once we type then another message so again let's go so currently we are in the landing stage I let's say I haven't touch anything but I have directly click on submit so now validation message is visible like this we do again one more thing we can do just like we have created element hash property on the element just like that we can create a hash property on the form also because even if if uh we we have valid we have shown the validation message here but in the function also mean the means in the also we need the form State like form is valid or not so that also we can use so here form is equal to here just like I'm creating a hash property in case of input element we have stored NG model here you need to store NG form now this form variable this hash property let's make it user form now I have created hash property username user form and in that hash property I have stored NG form now this I will send as a parameter over here now we need to create parameter over here also so form and for this form we have to add a data type so NG form so it is added over here now let's add a debugger I need to showcase you like do all the form value you will get it over here also let's save let's enable the debug now if I click on submit so here you can see whole form value you get so now you can check form dot is valid invalid So currently you can see in the form invalid property will be currently say it is saying true because it is invalid because we haven't provided the value now let's continue and if I provide the value now if I click on submit now again let's check form. invalid why it is getting through pattern attribute invalid character or form do valid okay so valid property so in valid property you can get false let's try with removing this and if I submit let's try form valid again in both case it is getting False only why [Music] so let's try to print the same thing over here form dot invalided I'm just trying to print the same value over here let's see what do we get currently we are getting true over here let's enter the proper value still same is property change in angular 17 let's try with Json is it is it a circular or not not sure okay so here what else we got status is valid is stop has error false valid status valid nothing is getting change in the object let's try to search angular da doc might be possible like in angular 17 some properties might get changed so let's see that if they provided a or not template D form licate let me just check so as per angular they have said like this so form. valid unit use so previously we used to access directly the form value but now it is inside the form so whatever the property you create form. valid so let's try that now so here you can see I have added user form. form. valid so let's try that so on the page load you can see it is true but if I provide the value proper value so now it has become false even if we removed now you get the true so now this thing you need to validate so you let's try to print constant is form valid so form do form dot valid so now you are getting it the same thing over here let's check so currently if we click on submit validation let's unable it currently if we submit in is form valid you are getting fals because the form is not validated because we have not provided the required validation but if I provide let center now if I click on submit so now here you can see we have got true means form is valid so this variable you can use in your function also before before making the API call so you can just add a statement like if this is true then only you can create uh make the API call now this same thing you can use to disable the button also so now using property binding you can do the same thing so disabled and you can pass this value over here but now that validation message won't trigger because we have just disabled the button unless form is not valued button won't be enabled so now you can see button is disabled if we provide the form value properly then only button is getting enabled let's remove so now you can see button is disabled so these are the all various possible ways what we can do in template form so the basic validation with hash property with form also we can do email validation is also there like just like email valid validation you can validate pan card other card whatever the pattern you need to create let's say in case of password also like minimum three character one uh alphabet two Capital lower case number should be required you can create your pattern and then you can add it on the password text box so this is everything what we need to see when we decide to go with the form validation in case of template form so I hope you find this video helpful please do like and subscribe my channel that's it with this current video

Channel: LEARNING PARTNER

Views: 6,350

Keywords: angular 17 tutorials, angular forms validation, angular 17 forms validation, template form validation, angular 17 template form validation, angular 17 template form, angular 17 reactive form, angular forms, validation in angular, angular 17 forms, how to create forms in angular 17, angular 17 forms validations, angular tutorial, angular 17 tutorial, angular 17, angular 17 tutorial for beginners, angular 17 project, angular 17 new features, angular 17 full course, angular

Id: MtTeZtLC8Kc

Length: 31min 11sec (1871 seconds)

Published: Thu Feb 29 2024