Reactive forms validation in Angular 17 | Custom validation in reactive form | Angular 17 directives

hello everyone I'm going to uh share some code how to write uh the reactive form validation in angular 17 so let's start uh here I have already created uh angular validations project so uh see here is the architecture of the angular 17 this one is the SRC folder and this one is the app folder in the app folder uh these are the file that uh I've created default uh so in the amul 17 basically uh few feature uh introduced I have already uh cover in our the previous video I have added in our description box so please go and see what's new in eng 17 what other feature also cover so let's come to the reactive formul using 17 here see here is the version that I have already installed angular 70 see see here the angular CLI 17 1.1 and node one node uh version 18.1 5.0 package manag this ones and Window OS is my XS Cod see this one also install here so come actually I have already set up all one so and this will help us to uh save your time so I don't want to take your much time so I have already prepared this one see here is the app component I have I have created the form as well so see here the I have set up I will explain all all one how to uh write see the app component here I have created here so keep in mind when uh once we uh go to the form lessons we'll need to import the angular form NG form form module reactive form module and common module as well in the angular 17 this is basically angular 17 features and also this one as basically all the component work as a stand Lo so we'll need to import these all above files here and here this will help us to uh create your form and create your form see I have created the model that name is the form and the property as the full name username email password and accept these are the methods I have created on the submit once form is submitted the form object will come here and you can uh you can use your form data as for your uh actual needed you can call the services to post the data in the database these all uh all uh I have covered in the next video so please comment if you need uh the reset button basically used for the reset the form now come to the HTML see here I have already created the boot test form so uh you can uh use the boot trp as well in eng 17 so there are two method you can install the CLI command I will share in the comment box the CLI command for the boot step also by the simply you can uh use in the index. HTML file this URL I will share in uh all the detail in the description box or the comment box as well so you can also I will also share the GitHub code link so you can download and see everything that I created comes to the uh form see here is the form I have uh created the name of the form is a form and NG form uh basically I have created the alage of the form to see here and here is the submit button submit action basically uh submit action the if form is valid the submit button is hit uh you can see here uh the submit actions once all the validation is pass then submit button will here otherwise they will display message on the form these are the basically uh the the form group that I have created see first one is the full name the full name is the input type so text name is equal to full name and the directory NG model I have used to bind the form. full name that's is uh that is the form full name here that's very similar to I have uh bind the username email password and accept terms as well see uh here also added the required validations and the alas of the text with the full name the name of the alas I have used to full name. error if any error will come they will display the message see here I have added the div that will help us to uh display the message if any error on this field see if full name. error is required that will be display this message and very similar for the other one the username I type is equal to text class boot STP class name is equal to username directory and model used for by uh form do username required basically use for the required build and mean length and max length as for you you can Define the 6 to 20 or anything you want I have for the username this uh and also uh use the NG class directory to uh display the message see here I have created uh the div display the message this one basically the required message once error required this message will display one mean length is not as for you if suppose you put the five length this B message at least characteristics if you exceed the limit 20 that when you type the 25 this message will display these are the uh field that I have already cre see here the type is equal to email and and bind the value NG model uh form. email required email type equal to email and and alas of the email this one I have bind this one and also these D will display as for uh once email is required other one if emage is not valid this message will be display on the form see here is the password type valid password validations I have already added here the required mean length max max length as for you you can change and name is equal to password and created alage the form alage of this textbook and G model so so see here password. error class I have added here I haveed the three field uh basically once form uh once field is required Mage will display here and if mean length and max length will be display once uh mean length and max length not in come the last I have added the check box for the accept terms the accept form that accept ter I have B with the NG model so c i this one the required name of theas I have created to bind with the NG CL here is the label that's we will display with the check box and this one the basically the message it once is not check this one basically the button that I have used the submit button once perform on this register button the form submitted with the submit method see here created the submit method once click on the submit button register the form the submit uh submit action will be executed with the all the value here you can use your come in the last this one the button used for the button type on the reset button on once perform on click on the reset the method reset will be call and uh the reset basically reset all the form so see uh what the output will be here run the form and just so it's taking some time so please check application is building right now Now application is built and load the form here you can see here is the form that have the full name username email password and terms and conditions button here is the register button and reset button so click on the register the full name is required once uh type the name see the the message disappear here once I uh type the name of this it's uh saying username must be at least six character see here and type the email of Anil do at the one C uh gmail.com once uh add the password password must be at least six character so I have added see here the terms once uh click on the submit button the submit button not fire actually uh here is required to ter check once I click on the check box the register action button will if I see the output I have uh inspect come to the console see here is the form that I have log uh in the consone log see here is the form data I have loged the console log that's will be display that's uh see once I click this one the value I have come and you can use this value as for your need once we need to reset the form click on the reset the valuable form click on the the all the disable once click on the reset this form will reset here I hope uh you learn about this so uh I will share this code with you uh uh you can download the GitHub so thanks for watching this video I hope uh you got this point if any uh query please uh add in the comment box and also requesting to subscribe my channels and hit the like button it will encourage us to prepare the other video as well so uh thanks for the watching thank you

Channel: Code Sample

Views: 1,204

Keywords: Angular, Angular 17, Angular 17 Tutorial for Beginners, Angular 17 New Features, Angular 17 Tutorial, Reactive forms in angular 17, Angular 17 directives, Dynamic reactive forms angular, Reactive form validation in angular, How to add validation in angular forms, Custom validation in angular reactive forms, No directive found with exportAs 'ngForm'.ngtsc(-998003), NG8002: Can't bind to 'ngClass' since it isn't a known property of 'input', Angular custom validator

Id: rAYqQtIPTFE

Length: 13min 16sec (796 seconds)

Published: Wed Jan 31 2024