Form Validation of Reactive Forms | Reactive Form | Angular 13+

in the last lecture we created a reactive form in angular now in this lecture let's learn how to add validation on a reactive form so this is the form which we created in our last lecture now if i open developer console let's clear everything here and when i click on this submit button you will notice that this form group object has been logged here and when i expand this form group object here we have this value property so you will notice that this value is an object and this property has this country email first name gender hobbies and last name as its properties and we have created these properties in our typescript class so here we are defining those properties and here we are setting the default value for gender and country and that's what you will see here in the console so for the country india is set and for the gender mail is set as default value now let me clear this console here and let's enter some value in these form controls so for the first name let's say john smith and let's click on the submit button and now if i expand this value property here you will notice that these values have been assigned to these properties all right now if you notice this form group object also has this valid property and if i expand this valid property currently it is set to true and this invalid property here it is set to false that's because by default a form is always valid now when we add a validation on the form in that case based on the validation the form will be valid or invalid so let's learn how to add validation on a reactive form now in case of template driven form we used some angular directives like required email etc on the html itself right but here in case of reactive forms we don't need to specify these directives in the html that's because we are creating the form in the typescript class we are creating the form here and then we are synchronizing this form with this html form right so we are also going to add the validation in the typescript class itself now to use validation we need to import validators from angular slash form now let's say we want to make this first name last name and email as the required fields so here what we need to do is to this form control we can pass a second argument and the second argument will be the validators and this validators has some validator properties for example it has this required property and what does this required property do if i hover over it you will notice that this validator makes a form control required so we use this validator on the controls which needs to have a non-empty value let's go ahead and let's use this validator on last name and email as well with this let's save the changes let's go to the web page let's clear everything from here and now this first name last name and email are required fields so now if i click on this submit button and if we expand this form group object now you will notice that this valid property is set to false because now this form is not valid now let's clear this console again and let's enter some value for these fields and now click on this submit button and now you will notice that that valid property is set to true in the same way let me refresh the page here and if i go to this elements tab and let's expand this div and here we have this form and here we have this input element the input element for the first name so you will notice that initially this ng-touched ng-pristine and ng-invalid css classes has been added on this input element now when i go ahead and touch this form this input element you will notice that ng untouched has been removed and ng test has been added here and if i go ahead and add some value here you will notice that ng pristine has been removed and ng dirty css class has been added and also ng valid has been added because here this field is required field and we have specified some value for this field so now this input this form control is valid and that's why this ng valid has been added on this but if you go to this last name text box here you will notice that since this text box is not touched yet this ng untest is added and also ng invalid is added because this field is a required field and we have not entered any value yet in this field so let's say if the form control is invalid and if it is touched then we want to display a red border around the form control we have already done this for template driven form so we already know how to do that let's go to vs code let's go to appcomponent.css and we know that when the form control is invalid on that form control ng invalid css class will be added and when the form is touched on that form control ng touched css class will be added okay so when the form is touched and when it is invalid we want to set the border to red color 1 pixel and solid and we only want to set the border for the input elements so here let's also specify that the type should be input okay now let's save the changes let's go to the web page so initially no red border has been displayed here because these controls are not touched yet okay even though they are invalid but they are not touched yet but when i click inside this form control and when i click outside now you can see the border has changed to red color same is the case with last name and with email so this is how you can validate a reactive form now let's see what are the different validators available for reactive form let's open a new tab here let's search for angular dot io let's go here let's go to docs and here let's search for validators okay let's click on this validators so these are the validators which is available and which you can use on a reactive form let's click on this cmo now here you can learn about each of these validators in detail so we have this min validator we have max required then required true okay then we also have this email so let's go ahead and let's use this email validator okay so currently what is happening is let me enter some value here okay and let's enter some invalid email here and when i click on this submit button let's go to this console here this form group has been logged you will notice that this valid property is set to true because this email field is required so here we have specified some value for this email field but this value is not a valid email okay so when the value is not a valid email here in this email field in that case we want to set this valid property to false so here on this email form control we also want to add another validator okay and that value data is email so when we want to use more than one validator in that case we need to use an array and inside that array we can specify more than one validators so here again let's use this validators dot and then here we have this email all right let's save the changes let's go to the web page let me clear everything and let's enter some values here and here let's enter some invalid email and now when i click on this submit button you will notice that now this valid is set to false because this email is not a valid email and you will also see that red border here but if we enter some valid email here so for example abc at example.com and now if we submit this form now the valid property should be set to true because now all these three fields are storing a valid value okay so this email is another validator then we have this min length we have this max length so you can learn about these validators from this documentation this is all from this lecture if you have any questions then feel free to ask it thank you for listening and have a great day

Channel: procademy

Views: 28,447

Keywords: reactive form, form validation, angular form, angular, angular tutorial, complete angular course

Id: jdsSIKgJ6ZM

Length: 9min 51sec (591 seconds)

Published: Thu Apr 07 2022