Angular form validation - Template Driven Forms with Error Message.

hello everyone welcome to coding wall so today we will discuss about uh form validation using template drawing forms it is a uh please note that this is the continuation of my previous video how to create template driven forms so i have shown you the login page which i have designed it is a condition continuation for the login form which i have just replaced with the names like name email id and mobile number password and confirm password so in this video i will show you how to give validations uh for the fields form fields uh individually and i will share the patterns for the mobile number password and email id2 so coming to the ts file these are the patterns which i will share in the description also in the video below so coming to this this is the farm so we will go to the ua now so i have given uh min min length and mainland for this if i remove this see there is showing that i entered at least four four characters okay in the same way i'll uh in the email area also i am giving and clicking below it is showing the error message that enter a valid email address same thing for the mobile number i have given that then as uh starting number should be with nine so let me show you okay coming to the password uh i will give code at the rate one two three same if i remove this and click here the confirm password and password should be same it is showing the error message so for this also i have uh i will show you in the video that how to uh give a password and confirm password validation also if i click this one that has been gone i'll open the console so if i click here so okay see here confirm password email mobile number name and password see like this i'll show you how to bind the data also the form file okay if you haven't subscribed to my channel please do subscribe and click on bell icon to get latest notifications and leave a thumbs to my video so let us start with uh trading of the form so as i have said before this is the continuation of the first video of the template uh driven form so this is my previous one i will use the same form and the ui also first i will copy this copy the email i'll paste it here and i will [Music] start with the name name field first so name enter name okay so here i'll take a dive um i have already given a class for error message it's error iphone msg so i'll show you here i have already taken a i have given a predefined uh css with the font uh type in pixel and color also so don't get confused further yet i will give you ng condition first i will take take the so in the previous video i have uh said the few topics on uh touchdown dirt type you can google it in angular ibo um we generally used if the form was clicked or not i mean touched by the user or not [Music] submitted i'm giving this condition for f the form was not touched or submitted and two conditions name dot error [Music] [Music] name where [Music] are you giving me length as four copying this and then pasting here okay the same way i will do for email also i'll copy this thing and i paste it here we are giving this id right ng model id so that id will consider further i mean you take the reference for the uh messages so same way i will replace here here and here email and say select so here i will give the pattern for this address item item is equal to i've already pasted the pattern in my ts file so this is the pattern for the email address to validate the email address whether it is a valid one or not i will uh paste it in the description below so you guys can easily access i mean you can use it same way i will give mobile number here i'll copy this moving in [Music] okay so here i need to change the same way i will copy this i will change here okay i forgot to change here i think uh yeah i have the same thing so mobile number so mobile number is mobile number valid uh or else we will change the text also before that i will uh copy with the validation pattern for this i'm storing this in this variable mobile number pattern so i'll copy the pattern and i will paste it here a valid mobile number with nine okay so it will uh this error will be shown when the user enters uh from one to eight the first number should be if the first number is one two eight between one to eight then this error will be displayed and uh coming to the password i will uh i will enter both password and confirm password before that i need to check one's mobile number okay so same way i'll copy the mobile i will paste it below and then [Music] take this and paste it here password password is required replace it with password okay i'll change the text here password [Music] because i need to show a complete error message there [Music] sorry my back okay this good yes like this okay so in this way i need to give the pattern here pattern copy the password pattern okay same way copy this change password confirm password and i will copy that at that thing and paste it here [Music] and i need to change this replace with the password now the main thing is confirm password and password or we will do one thing yeah anyway uh anyway uh that will show the same password is needed so i will do one thing uh confirm password i'll copy this and i'll paste it here confirm password and password and if not equal to average array password i mean the password and confirm password if both are not same i will enter a confirm password [Music] password password [Music] 8 elsewhere number mean length 10 okay and i don't think uh email should have m in length that's okay uh we need to give a max length of up to 60 or 140 depends upon so i'm saving this [Music] okay [Music] so first we will check with the mean length max length okay name is [Music] is okay by showing that enter at least four characters okay if i press the fourth one it is disappearing okay copy this and paste this coding one okay [Music] email address is required if i paste this if the help was gone the same way mobile number if i enter this if i remove this we got mobile number is required [Music] [Music] [Music] [Music] okay check the mobile number once i don't know why this issue is coming i need to [Music] keep this because i'm giving in the variable i'm assigning the variable line so maybe there is a reason it is it is showing that uh i have message it's not me i'll copy this paste it here 3. okay this is gone now suggestion password i'm clicking this if i enter like this password length should be 8 to 6 characters 1 2 three four five six seven eight that is showing that password uh should contain i should be eight to sixteen characters and content both numbers and letters and special characters so i'll remove this i will enter this okay now okay same issue here i need to give say paste it here put the passwords [Music] now okay now email id mobile number name and password if i remove anything okay if i click it won't submit see because i have kept a form validation right here here login form dot login form dot form dot validation so if the enter form was uh there is no errors i mean uh enter ls satisfied then the form will be get submitted ok click now see the form got submitted so in this way we can uh uh give the validation i mean we can set the validations for here template domain form in my upcoming video i will show you how how to create a reactive form and the validations for that so keep watching do subscribe to my channel and if you have any doubts you can comment or if you want to get into any discussion please get into the comments and give thumbs okay thank you so much have a great day

Channel: coding wall

Views: 594

Rating: 5 out of 5

Keywords: angular 4 disable button if form invalid, angular 2 disable button if form invalid, angular 2 form validation tutorial, angular 2 form validation template driven, angular 4 form validation, angular 4 form validation example, angular 4 form validation tutorial, angular 4 form validation template driven, angular validate required field, angular form validation required, angular css validation, angular show validation messages, bootstrap angular validation messages

Id: Mj_2H8FUvro

Length: 24min 32sec (1472 seconds)

Published: Wed Jun 30 2021