Angular reactive forms cross field validation

this is part 18 of angular 6 tutorial in this video we'll discuss Crossfield validation in a reactive form let's understand this with an example here's what we want to do confirm email is a required field if we do not type anything in this field we want to display the required validation error on the other hand if we have typed something in the confirm email field the value should match with what we have in the email field if they do not match then we want to display the validation error email and confirm email do not match to be able to do this we'll have to compare two form control values that is email and confirm email at the moment on our create employee form we only have the email form control so let's also include confirm email here's the HTML of our email form field let's make a copy of this and then change the bits that are required the property name on the for matters object is going to be confirm email instead of email we don't have this property yet we'll create it in just a bit the text on the label is confirm email the ID of the input element should also be confirm email so is the value for for attribute and form control name finally we also need to change it within this NGF structural directive and within this interpolation expression to validate if email and confirm email fields have same value we need compared to form controls if you look at a validator function in angular it only accepts one parameter and that parameter type is abstract control so this means we can either pass a form group or a form control as a parameter we cannot pass to form controls to the validator function but what we can do is group them using a nested form group and then pass that nested form group as a parameter so let's group email and confirm email fields for that we are going to make use of the form group name directive I'm going to include a development here and on this let's use form group name directive and let's set the name of this form group to email group move disclosing they're after our confirm email field so in this next reform group email group we have the two form controls whose values we want to compare so we are going to pass this nested form group as a parameter to the validator function so it can perform Crossfield validation now we need to do the same grouping within our component class as well first let's include a form control for confirm email the key is confirm email default value is an empty string for now let's include just the required validator now we need to create a nested form group for these two form controls email and confirm email in the template we have already done that grouping and the name we have given to the group is email group so using that same name let's create a nested form group in the component class by using the group method of the form builder class to create this nested form group just like how we have created this skills nested form group so within this email nested form group we want our email and confirm email form controls let's save all our changes so far and take a look at the browser notice now in addition to email form field we also have the confirm email field when I touch this field and leave it in a console we have an error cannot read property required of undefined we have this error because we are missing confirm email property on / validation message structure remember this validation message structure holds all the validation messages for all our form controls let's make a copy of this email object here and then change the bits that are required the property here is going to be confirmed email and we want required validation error and the validation error message is confirm email is required we need this confirm email property on the form error subject as well because if you look at our confirm email form control it binds to the confirming the property of the form errors object to display the validation error so only for matters object let's include this confirm email property so just after email let's include confirm email as well notice now when we touch the confirm email field and leave it we get the required validation error as expected now let's type a valid email address in the email field and if I type an email address that does not match what we have in the email field we don't have any validation error so what we want to be able to do now is compare email and confirm email field values if they don't match we want to display the validation error email and confirm email do not match for that we need a custom validator function so in the component class file let's include a function I'm going to name it match emails this is a validator function so it's going to take abstract control as a parameter I'm going to call the parameter group because we are going to pass the nested form group that contains both our email and confirm emails home controls this method returns an object with key value pair if there is a validation error key is of type string and value can be anything if there is no validation error this method is going to return now to this match email method we will pass our nested form group email group and if you take a look at our email group nested form group it has got these two form controls email and confirm email so let's retrieve those two form controls from the past in nested form group for that let's create a constant I'm going to call this email control and on the Aston Group parameter let's use the get method and then passed his get method the name of the email form control which is email this is going to return as a reference to our email form control as to the same thing for confirm email form control let's call the constant confirm email control and the name of the confirm email form control is confirmed email so all that is left now to do is check if both the controls have same value if they do then return null indicating that there is no validation error if email control dot value equals confirm email control dot value then we want to return null to indicate there are no validation errors else the values do not match so let's return an object with a key value pair to indicate there's a validation error the key can be anything but I'm going to call it email mismatch again the value can be anything I'm going to set it to true now here's the important bit to understand to this match email method we are passing the nested form group that we want to validate we usually pass the form control that we want to validate since we are passing a nested form group here to validate we want to tie this validator to that nested form group in our case the nested form group is email group here is a nested email group now let's try our custom validator function - this nested form group we do that by passing another object and this object is going to have the key validator and the value for this is going to be the name of our custom validator function now another very important point to keep in mind is because we are attaching our custom validator function to the email group nested form group when our custom validator fails the error key that our custom validator function is returning which is email mismatch this key will be attached to the errors collection of this nested form group email group and not to the errors collection of email or confirm email form controls this is very important to understand because we are going to use the errors collection of this email group nested form group to determine if our custom Crossfield validation has failed so within our validation messages structure let's include a property with this name email group when our custom validator fails we know it's going to return this error key email mismatch so let's use that as a property within email group and the error message that we want is email and confirm email do not match we also need this email group property on form errors object because the view template binds to it to display the validation messages now to the most important bit we need to modify log validation errors method to check if our email group nested form group has failed our Crossfield validation before we do that let's quickly understand what this method is doing it looks over all the form controls and that nested form groups in our employee form root form group if the control that we are currently iterating over is an instance of form group meaning if it's a nested form group then it recursively calls the same method log validation errors and if the control that we are dealing with is not an instance of homegroup that means it's a form control so it comes into the else block and it's checking if that form control is valid or not if it is not valid then for that form control it loads all the available validation messages from our structure validation messages and then it checks the errors collection of that form control which has failed validation so within the errors collection we will have the validation rule names as the keys for example if a phone control has failed required validation the errors collection will have the required key attached to it so we are checking the errors collection and we are looping over each error key and for the validation rule for which the form control has failed validation we are loading that respective validation message into the form errors object and the UI will bind to this form error so object to display the validation error so the important point to keep in mind is at the moment this function is checking only the errors collection of a form control but to determine if our custom Crossfield validation has failed we should also be checking the errors collection of our nested form group email group so let's change this code accordingly let's cut everything that we have in the else block and move it above the if block we don't need this else block anymore so let's delete that so with this change the abstract control that we are currently iterating over irrespective of whether it is a nested form group or a form control we are checking if it is not valid if it is not valid it comes inside the if block and then we are checking the errors collection and populating depending on that they form errors object with the appropriate validation error message the UI binds to this form errors object to display the validation error so let's make the changes required in the view template now we want to add this bootstrap styling class has era is the confirm email property on the form error subject is true thee or email group property on the form errors object is true thee we want to do the same thing with the span element that displays the validation error message finally we also want to display the validation error message we have in the email group property so let's include another interpolation expression and change the property name to email group notice now as soon as we start to type in the email form control we see undefined here that's because I think within our custom validator function we misspelled this key mismatch we have an extra t there so let's get rid of that notice now when we start to type in the email form control we see the validation error email and confirm email do not match right away we do not want to see this validation error until they start to type in this confirm email field so let's make an additional check with our custom validator function match email if the confirm email control is pristine that means the user didn't have the opportunity to start typing in the confirm email form control so at that point let's return null to indicate we don't have the validation error notice now when we type in the email field we don't see of a custom validation error but when I start to type in the confirm email field and if that email does not match with what we have in our email form control we see our custom allocation error email and confirm email do not match but when I delete this we see both errors that is the required error and our custom validation error when the confirm email form control is empty we only want to see the required error for that we need to change the binding we have in the template instead of having two interpolation expressions here let's have a conditional expression if confirm email is true thee then display what we have in the confirm email key else display what we have in the email group key notice now when I touch the email field and leave it without typing anything we see the required error let's type in a valid email the validation error disappears as soon as I start to type in confirm email field we see email and confirm email do not match if I delete we only see the required error if I type an email that does not match we see again our custom validation error if I type an email address that matches with what we have in our email field the validation error disappears here is our custom validator function that we just implemented that's it in this video thank you for watching and have a great day

Channel: kudvenkat

Views: 31,336

Keywords: angular reactive forms confirm password, angular email confirmation in reactive form, angular cross field validation, angular 6 cross field validation, angular 2 cross field validation, angular reactive cross field validation, angular 5 cross field validation, angular cross form validation, angular compare validator, angular validation compare two fields, angular 2 validation compare two fields, angular reactive formgroup validation, angular reactive nested forms validation

Id: m6imvYpP_Js

Length: 15min 56sec (956 seconds)

Published: Fri Oct 26 2018