Angular Reactive Forms: Learn How to Create A Custom Validator

hello everybody in this video we will see how to create a custom validator in reactive forms yeah a custom validator we will also create a validator which ensures that two controls have the same value so let's get started in our example we will use a symbol form which is this one my form which has the password and the confirm password form controls the idea for this custom validator that we are going to create is to make sure that password a confirm password has the exact same value it's a very common use case that we often see in registration forms and if we see also the html we will see that we have a form with the form group by form and then we have two different fields two different input fields the first one is a matte form field we would which we have input with mat input directive and we have here the form control name password to apply a binding and we also have the exact same thing or to be precise sort of the same thing an input with a directive matte input and the form control name confirm password this is the very simple form that we have and also note here that you have a matte hint the idea is to present the passwords do not match conditionally if we do not have the exact same value in the password fields here and here we need to display this error message and it will go in the browser to see how this looks like it's this form type your password retype your password and of course we want this one to appear conditionally so first let's go into the component yes and we're going to create a custom validator the custom validator will start firstly with the anatomy of the custom validator which is we can say that they are simple i will create a private i will name it like control values are equal it's nice to have in mind when we create custom validators to create abstract validators so that we can reuse them this validator returns the validator fn validator function so how to implement this one and now inside we need to return an anonymous function which as argument has one one argument and this is of abstract control abstract control yeah here it is just a reminder here that the option control is the interface that both form group form array and form control extend and this inner function returns validation errors or null and this is the two functions that we need to have we need to return validation errors and if we follow this the validation error is a key value pair and the idea is to return this key value pair when the validator is not satisfied otherwise we will return null so if true if everything are okay we need to return null otherwise we need to return an object and i will name it values do not match what do we have here expected yeah of course so this is the anatomy of the custom validator if the validator is satisfied return null otherwise return an object let's now improve this validator and make it work for for for our form and have also the logic that we need to have first of all we will go in this line and since we know that the argument is going to be a form control we can create a form group which will be equals to the control r form group now in order to make sure that we [Music] now since we have the control we need to to get the value of the password and the confirm password how can we do this we need to have the control value a the value of the control actually we need to have the value of control a which is the first one and we can be like form group dot get provide here a name and get the value and do the exact same thing sorry wrong keybinding and do the exact same thing for the other one get something in value now the key part is what to provide here since we're going to have the custom validators as abstract as we can we can provide the password and the confirm password in the function here so what we can have is the control name a which is going to be of type string and the ctrl name b which again is going to be of type string nice so here we can reuse this one ctrl a and ctrl b we have the value of ctrl a and we have also the value of control b and of course the condition will be very simple if the control value a is equals to this one return null otherwise return the object and we have ready our custom validator now let's use it to use a custom validator in the form group we need to provide in the second argument of the form group as you can see this object is the first one so we need to provide a second argument and this is going to be an object and we will type validators and for the validator we will use the control values are equal and we will provide the password and confirm password so this is how we create and use a custom validator for the form group the missing part is to have an integration in the templating to use it in the templating if we use here interpolation for example my form.valid let's go in the browser to see how this works we can see that the values the validity is true which means that both the both this field and this field have the exact same values but if i start typing here something one two three we can see that this is false but it would have the exact same thing here the validity is true and now let's do the exact same thing to present to appear the hint conditionally but you know what we're not going to use the valid but we're going to use this one the values do not match so the math hint we will present it will appear and if sorry if my form dot errors and if the values do not match is truthy then we need we're going to display the password do not match let me delete this one and let's go and see how this works as you can see we do not see here the hint and if i type a password my secret password one two three passwords do not match if i type one two three we no longer see this one if i type anything else for example four passwords do not match and that's it all this is how we create a custom validator in reactive forms to control two different form controls thanks for watching

Channel: Code Shots With Profanis

Views: 905

Keywords: Angular, Angular custom validation, Angular custom validator reactive form, Custom validator, Reactive Forms, angular, angular course, angular forms, angular forms tutorial, angular tutorial, angular tutorial for beginners, how to create a custom validator in angular reactive forms, learn angular, reactive forms

Id: mK0CX-68hBE

Length: 9min 3sec (543 seconds)

Published: Sun Feb 14 2021