Angular password and confirm password validation

they say spar 27 of Angela clad tutorial in this video we'll discuss how to compare password and confirm password fields and validate if they are equal if they are not equal we want to display this validation error message password and confirm password does not match this is commonly called Crossfield validation in angular we cannot use the built in angle of validators to perform cross validation so let's create a custom validator to use a custom validator in template driven forms we create the validator as a director we discuss creating custom validator and a directive in parts 25 and 26 of this video series this video gives us a little more experience creating custom validators and directives will make this custom validator a reusable validator so we could use it to compare any two input fields for equality for example we can use the same custom validator to compare if email and confirm email fields are equal here is of a great employee form at the moment we don't have password and confirm password fields so let's include them on our form let's place our password and confirm password fields just after this employee photo part image field here is our password field notice we are using an input element we have given it the name password we are also using the ng model directive and we are also using the angular built-in required well data and we are using angular touched invalid and required properties along with bootstrap classes for styling and displaying required validation error message and here is our confirm password field and again this HTML is very similar to what we have on the password field except that here we named our field confirm password now this is all standard stuff that we have discussed so far in this video series nothing related to Crossfield validation is going on here so let's see what changes and then take a quick look at the browser notice now we have password and confirm password fields if I attach the password field and leave it we get the required validation and same is the case with confirm password at a moment we don't have Crossfield validation in place so if we type non matching passwords notice we don't get any validation error so let's see how to implement this we are going to create a custom validator let's place the custom validator in its own file and I'm going to place that file in the shared folder so let's right click on the shared folder add a new file and I'm going to name this file confirm equal validator and we know we are going to create this validator as a directive so it also has a dot directive suffix and this is a type script file so it also has dot TS extension in angular a custom validator is nothing but a class so let's create a class and I'm going to name this class confirm equal validator directive a custom validator implements validator interface so let's make this class implement the angular validator interface we don't have the validator interface type so let's include the required import statement to import validator from angular forms in angular when we create a component we decorate the class with add component decorator similarly when we create a module we decorate the class with at ng module date later here we are creating a directive so let's decorate this class with at directive decorator we don't have this directive type imported yet so let's include the required import statement to import directive from angular core now we are going to use this directive as an attribute on the element that we want to validate in our case we're going to use this directive to validate if password and confirm password fields are equal so we are going to use this directive as an attribute on one of these two fields so we need a selector for that so let's specify that selector right here notice we named our selector app confirm equal validator now we can use this selector as an attribute either on the password field our from password field that's actually included on the confirm password field right here next we need to register our custom validator with the list of validators that angular maintains for that we are going to use providers property and this is the syntax we use to add our custom validator class to the list of validators angular maintains and that list is in this ng validators it contains all the validators including the built-in validators for us to be able to use our custom validator we have to add our validator to that list angular maintains and this is a syntax that can help us do that and it's essentially said this multi property to Drew to tell angular that we want to add our custom validator class to the list of validators angular maintains notice we have a red squiggly and ng validators that's because we don't have it imported yet so let's import it from angular forms now notice of a custom validator class is implementing the angular validator interface so let's provide the implementation for the method provided by this Val data interface and that method is validate this method is going to receive the controls that we want to validate as a parameter now if you look at this custom directive we are actually using it as an attribute on the element that we want to validate in our case we are using it on this confirm password field so this field will be passed into this method as a parameter so let's name the parameter control and the type of this is going to be abstract control so we don't have this imported yet let's import it from angular forms next let's specify the return type for validate method this method returns either an object or now if the validation succeeds this method returns null if the validation fails it returns this object and this object is a key value pair and the key is of type string and the value can be anything so let's specify the value type as any now I'm going to create an input property for this directive the reason we are creating this input property will be clear in just a bit now I'm going to name this input property same as the selector because this is a directive input property for some reason if you don't like the name of this property you can use an alias instead we discussed creating an alias in our previous videos in this series but I'm going to name this property AB confirm equal validator and this is an input property and the type for this is string we don't have this input type input it yet so let's import it from angular Co now we're going to use this input field to pass in the name of the field that we want to compare confirm password field width now notice we are using this directive as an attribute on the confirm password field right here now we want to compare the value and confirm password field with the value in password field so we are going to use this input property to pass the name of the password field so instead of having the name of the control hard-coded within our validator we are going to pass the name of the control that we want to compare this confirm password field with to this input parameter so let's specify the name of the password field as a value for this input parameter now we can use this input property within our validate method to get a reference to this password field so within our validate method let's create a constant and I'm going to call it control to compare and that equals to the control that is coming into a validate method as a parameter and this control is nothing but the confirm password field we that's the field on which we have our directive used as an attribute so the confirm password field is coming into this method as input parameter on that I'm going to call parent so what is the parent of this confirm password field the parent for the confirm password field is the route form element okay so we are going to the root element and from there we are going to get our password field now you might be wondering why do we have to go you know from the password field to the root and then try to find the password field isn't there an easy way to find the password field I don't think so because these are sibling nodes so we have to go up one level and then find the password field that's the reason we are using the parent property and on that we are going to use the get method and we know we have said this input property to the name of the password field so we can use that property to get the name of the password field so now within this constant we have a password field so all that is left now is to check whether the values in password and confirm password fields are equal if they are then we return a null indicating validation succeeded otherwise we return an object with the key value pair indicating validation has failed so this if statement right here checks if this control to compare is true thee and the value in that is not equal to the value in control so this control is the confirm password view and this control to compare is the password field if they are not equal then we want a signal validation has failed so we are returning this object and remember the return type of this method can either be an object or an now an object if the validation has failed with a key value pair so the key here is a string not equal and a value can be anything I am returning a boolean true now if they are equal then what we want to do is simply return now now we can use this key not equal within the view template to determine when to show the validation error so let's flip over to the view template and on the confirm password field let's make a copy of this span element the validation error message here is password and confirm password does not match and instead of using the required key we are going to use this key not equal so the final step is to import of a validator in the module where we won't use at the moment within our project we only have one module and that is our route module so in app dot module dot ES file let's include the required import statement to import our custom Val data and since this is a directive we also need to include in the declarations array right here let's save all our changes and then take a look at the browser notice now when we type non matching passwords we get the validation error right away password and confirm password does not match as soon as they match the error goes away but we have a small issue here notice when I delete confirm password we see both the errors required and our custom validation error now when we don't have anything typed within the confirm password field we only want to show this required error to fix it on this panel event let's include an additional check so basically we want to show a custom validation error only when the confirm password field is touched and when we have this key not equal on the errors collection and when we don't have this required key now when we have this required key on the errors collection then we know required validation has failed and at that point we want to show the required error and not this custom validation error notice now when we have non matching passwords we see the validation error right way when I delete this we see the required validation error and the passwords don't match we see our customer ID genera and when the match we don't see any validation error at the moment with our custom validator we have two issues here's the first one notice when the passwords are non matching only the confirm password field is tiled like this now I would actually like the password field also to have the same red border so what's the second issue here it is at the moment we have non matching passwords so we see our custom validation error as soon as the passwords match the validation error disappears so it seems as if everything is working fine now look what happens if we go back and change the password field so we have non matching passwords notice we don't get our custom validation error so this is our second issue in our next video we'll discuss how to fix these two issues on this slide we have our custom validator code and on the slide we have the HTML thank you for listening and have a great day

Channel: kudvenkat

Views: 72,943

Keywords: angular validation compare two fields, angular 2 password confirm validation, angular confirm password validation, angular password confirm validation, angular cross field validation, angular 2 cross field validation, angular 4 cross field validation, cross field validation in angular template driven forms, angular email confirmation, angular confirm email validation, angular compare passwords, angular compare email

Id: YhazkQd59Hk

Length: 14min 18sec (858 seconds)

Published: Tue Mar 06 2018