#125 Form Validation in Reactive Form | Reactive Forms | A Complete Angular Course

[Music] in the last lecture we learned what is a reactive form and how we can create a reactive form now in this lecture let's learn how we can perform validation on the form controls of a reactive form so in the last lecture we created this form using reactive form approach now currently on none of these form control any validator has been added so by default all these form controls will be valid and when all the form controls are valid in that case the valid property of the form group will be true so if I scroll down here you will notice that the valid property of this form group is true and the invalid property of this form group is false and if we check this valid property on form control level also for that in the form group we have this controls property which is an object and in that controls object for each of these form controls we have a property with a form control name and it is storing an instance of form control so if I expand one of the form controls here for example first name there also you will notice that the valid property on that form control is set to true and the invalid property is false that's because by default each form control in a form is valid and when each form control in a form is valid in that case the complete form will be valid now what we going to do is we are going to use some validators on some of the form controls for that let's go back to vs code now in case of a template driven form in order to add validation we used to use HTML attributes like for example required so in that case it will make this form control a required field in the same way we also used another attribute called email on the email field field in that case in that field we needed to provide a valid email address so we used to do the validation in the HTML itself in case of a template driven form but now in case of a reactive form we don't add these HTML attribute validators on the form element instead we add the validators on the form controls which we are defining inside this form group so for example let's say this first name last name and email it should be a required field to set that valid data all we have to do is to the Constructor of this form control we can pass another optional argument and here we need to use validators so this validators it is provided by this angular SL forms so let's import that and on that validators we have a list of validators for example we have this email validator this Max validator this max length validator Min validator and we also have this required validator and when we use this required validator it makes that form control a required field so if I H over this required valid dator you will see that it is going to make that field a required field so user must enter a non-empty value in that field okay let's go ahead and let's use the same validator on last name and email as well let's save the changes let's go back to the web page and let me clear the console and now when I click on this submit button this form group has been logged and if you go to the valid property now you will see that it is false and invalid is true because now this first name last name and email these are required Fields but we have not entered any value in these form controls so these form controls are currently invalid because they do not contain a valid value and as we learned if any one form control in a form is is invalid in that case the complete form is invalid and that's why here the valid property is false and invalid property is true let's check this valid property on the form control level as well so if I expand this controls object let's expand this first name object and there also if I go you will see that this valid is false and invalid is true same will be the case with last name so if I expand this last name control there also the valid is false and invalid is true and same thing should be there on the email field as well so this email field is also currently invalid because on this we have added a required attribute so here the valid is false and invalid is true so keep in mind that if any form control in a form is invalid in that case the complete form will be invalid and if we are using a validator on any of the form control then in that case case in that form control we must provide a valid data we must enter some valid input in that form control then only this valid property will be true and invalid will be false so now if I go ahead and if I enter some valid value and let's clear the console and now when I click on the submit button now we are providing a valid value for each of the required Fields okay when I click on this submit button if I expand this form group now now you will notice that the valid is true and invalid is false because now each of the form controls contains a valid value and if we check it at the control level also for example for the first name there also you will see that the valid is true and invalid is false because this first name is a required field so its value must be nonempty and currently it is non-empty that's why this field has a valid value and when the form control has a valid value its valid property will be true and invalid property will be false and when all the form controls in the form has a valid value the complete form will be also valid all right now here we have entered a proper email address but let's say I enter some invalid email address something like this let me clear the console again and now when I click on this submit button still you will notice that this valid is true and invalid is false and if I expand the controls and there if I expand this email control there also the valid is true and invalid is false now here we are not entering any valid email address but on this email address we have only used the required validator so this form control will only check if in this field we have a non-empty data or not if we have non-empty data in this form control in that case that form will be valid but what we also want to check is if the user has entered a valid email or not for that we can use another valid data so let's go back to vs code and on this email field it should be required and user should also provide a valid email address in this field so we also want to use another validator here called email now when we want to use multiple validators on a form control in that case we need to use an array and inside that array we need to specify the validators which we want to use so on the email field we want to use this required validator and we also want to use the email validator for that again first we need to access these validators and on that we will have a validator called email with this let's see if the changes let's go back to the web page okay and let's enter some data in these form controls and here in the email let me enter some invalid email address and let's click on the submit button now you will notice that the valid is false and invalid is true because now in the email field we are providing some data but that data is not a proper email address so the email validator will check whether this data it is a valid email or not since it is not a valid email the validation will fail and in that case this valid property on the form control as well as on the form level will be false because here one of the form controls has invalid data so the complete form will be invalid and we can also check it on the control level if I expand this email form control there also you will see that the valid property is false and invalid property is true and we can also see what validation error has occurred on this form control for that we can use this errors property so here you can see in the errors property you will notice that we have an error on email so this email is basically a validation error code for each validator we have a validation error code and this email is the validation error code for email validator so if the email validator fails in that case it is going to return an error code email and that will be set here for this errors property okay but if I go ahead and if I enter a valid email address let me clear the console and now when I click on this submit button now you will notice that the valid is true and invalid is false so this is on the form level and on the control level also if I expand this email there also you will notice that now valid is true and invalid is false and this error object should be null so it means that now on this email form control there is no error if there would have been any error in that case this errors property will have an object and in that object you you can see the error code now let's also talk about the state of a form so let me clear the console here let's refresh the page and let's go to this element section and there I'll expand this app Root this sections in there we have this form and in there we have this input box of type text and name here is first name so you can see form control name is first name and we also have this last name input element where the form control name is last name so initially you will see that on these form controls angular is automatically adding a CSS class and in that CSS class you will see CSS classes like NG untouched NG pristine and NG invalid that's because initially when the form loads for the first time none of its form controls will be touched okay in that case NG untouched CSS class will be added then then none of its form controls is dirty so a form control will be dirty when the form control value changes so since none of the form controls is dirty you will notice that NG pristine CSS class has been added and on this form control we have used a required validator that means in this form control we must enter a non-empty value but currently in this form control we have an empty value so this form control does not contain a valid value for that this invalid CSS class has been added by angular so in this way this is the state of this form control now when I click inside this form control inside this first name form control and when I click outside this form control will be touched in that case this n untouched will be removed and NG touched CSS class will be added let me show you that so just notice what happens here on this first name input element currently NG untouched CSS class has been added but if I go ahead and if I touch this form control so if I click inside inside it and then outside you will notice that NG untouched has been removed and NG touched has been added in the same way if I enter some value inside this form control inside this first name form control the value will change in this form control so this NG pristin will be removed and NG dirty will be added for example if I enter John you will notice that NG pristine has been removed and NG dirty has been added and now this form control also contains a valid value it does not contain an empty value so NG invalid has been removed and NG valid has been added and same is the case for all the form controls okay on this last name form control also you will notice that initially NG untouched NG pristine and NG invalid CSS class has been added because this form control is not touched yet its value has not changed and currently it does not contain a valid value it contains an empty string so that empty value is not a valid value value for this last name form control because it is a required field that's why you will see NG untouched NG pristine and NG valid but as soon as I click inside this form control and I click outside NG untouched has been removed NG touched has been added if I enter some value in this field then you will notice that NG dirty has been added and NG pristine has been removed and NG valid has been added and NG invalid has been removed so using these CSS classes we can get the state of the form control now keep in mind that if any one form control in the form is touched that means the complete form is touched if anyone form control is dirty that means the complete form is dirty and if anyone form control has an invalid value that means the complete form is invalid okay now we can make use of these states these CSS classes for our own purpose for for example let's say if a form control does not contain a valid value and if it is touched in that case we want to show a red border around the form and for that we can make use of the CSS classes so let's say if the form control does not contain a valid value in that case on that form control NG invalid CSS class will be added right so let's go back to vs code and let's go to app component. CSS and there here let's scroll down all right and here what we are going to do is we are going to create a CSS class and the CSS class name should be NG invalid okay so if on any form control we have this CSS class NG invalid in that case we want to set its border we want to set its border to Red it should be two pixel and solid let's save the changes let's go back to the web page and here you will notice that instead of adding the red border on the form controls it has added the red border on the form now here you might ask why we don't have the red border on the form controls because currently this first name last name and email does not contain a valid value so these are also invalid Fields then we should have a red border around these fields also that's because if I scroll up somewhere we are setting the border for those input elements okay so here you see we are setting the border for those input elements so this border is overriding the border which we are trying to set using NG invalid CSS class so I will comment this line here let's save the changes let's go back to the web page and now you will also see the red border around all invalid form controls now we don't want to show the red border around form we only want to show red border around form controls around invalid form controls so let's go back and let's specify that so if the form control is of type input okay and on that if we have this NG invalid CSS class added then only we want to show the red border with this if we save the changes if we go back to the web page now you will notice that now that red border is only being shown on the invalid form controls now initially I don't want to show this red border around invalid form controls initially when the page loads this red border should not be there if the user has touched that form control that means if the user has clicked inside the form control but he has not entered a valid value and then he clicks somewhere outside at that time only we want to show the red border around that form control for that if the form control is touched on that NG touched CSS class will be added right so we also going to make use of that CSS class so here let's say if the form control is of type input on that form control if this NG invalid CSS class is added and also the NG touched CSS class is added then only we want to show this red border let's save the changes let's go back to the web page and initially you will not see red border around these form controls but if I click inside this form control this form control will be touched and if I don't enter any value inside this form control in that case it will have an invalid value so in that case NG touch and NG invalid CSS class will be added on that form control now when I click outside now you will notice that now it has a red border around it because this form control is touched and it does not contain a valid value same will be the case with last name and email so this is how we can make use of these CSS classes which gets added on each of the form controls okay we can make use of these CSS classes so you see currently on this first name form control it has NG invalid CSS class added and also NG touched CSS class added and it is of type input and that's why this red border is around this form control but if I enter some valid value here this NG invalid will be removed so let's say John so NG invalid has been removed and since NG invalid has been removed that red border has also been removed okay so here in order to add validators in a reactive form to this form control we need to pass a second argument if we want to use only one validator then we can simply pass the validator name like we are doing here for the first name and last name but if you want to pass multiple validators we need to pass an array and inside that array we can specify the validators which we want to use on that form control now let's see what are the other form controls which is available on this validators object for that let's go to angular.io website there let's go to docs let's go to references and let's go to API references and let's search for validators so here we have the validators and here you can see all the validators which is available on a reactive form if I click on see more you'll also see how to use those validators and what that validator does so for example we also have this Main validator and using this validator we can set in a form control what is the minimum number of values allowed similarly we will have a validator called Max which tells what is the maximum number of value what is the maximum number of numeric value which is allowed in that form control and in the same way we have other form controls as well for example required and we understood it with an example then we have required true we have this email validator and we have other validators as well like Min length so for example on the first name control if you want to set what is the minimum number of characters required in a name you can use this m length validator Okay so you can go through this document to check what are all the validators available for a reactive form in angular now we will learn more about validators in our coming lectures and there we will also see how we can display a custom validation error message in our form whenever form control contains an invalid value

Channel: procademy

Views: 5,201

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

Id: 0C1arK0R-kc

Length: 20min 44sec (1244 seconds)

Published: Thu Jan 04 2024