Angular Forms Tutorial - 23 - Custom Validation

the built-in validators won't always match the exact use case of your application in such scenarios we can create our own custom validators in this video let's create a custom validator for the username field if we enter the username as admin we should display an error message admin username not allowed now a lot of the times you might want to filter out spam registrations the username or email field usually contains a string to identify such spam registrations let's assume that the spam word is admin for our example so let's see how to create the custom validator a custom validator is nothing but a function the function can be written right into the component file itself but since validator functions are usually reused in several places in your application it is always a good idea to create a separate file and export them so in the app folder I'm going to create a new folder called shared within the shared folder a new file called user name dot validator dot TS you now let's define the validated function I'm going to call the function forbidden name validator the function accepts one parameter which is the form control being validated the type of the control is abstract control make sure to import it from angular slash forms the validator function returns either of two values when the validation fails it returns an object where the key is of type string and the value is of type ne and if the validation passed it returns null in the function body we first test if the form control value matches the pattern admin so let's have a flag called forbidden and on the right hand side we use the test operator on the admin pattern basically what we are doing here is that if the username contains the string admin we set the forbidden flag to true else we set it defaults now based on the forbidden flag we can return either the object or null so if forbidden we return the error as forbidden name along with the form control value as the value property so the name of the validation is forbidden name and the value is nothing but the control value that was passed if forbidden is false we simply return null finally to be able to use this validated function we need to export it we have now created our own custom validator let's see how to use it to go to AB dot component dirtiest and to the list of validations add the validator function the function name is forbidden name validator and make sure to import it from shared slash username validator dot T s also make sure you have specified the validator in the validations array and not outside now displaying the error message is pretty straightforward in AB dot component dot HTML below the existing error messages add another error message so let me copy paste this error message and make the modifications now the error in our case is called forbidden name so let me copy this and paste it as the error so the ng if condition now is user name dot errors dot forbidden name now if this is true we apply a class of text danger but the error message is going to be user name not allowed we can also go the extra mile and specify the value that is not allowed as well so you can see that we are specifying the value property here so in there a message I can use interpolation use the name dot errors dot forbidden name dot value so value is going to give us the value of the form control if you now take a look at the browser type the username as admin and tap out you can see admin username not a loved a custom validation works perfectly fine now it is also possible to pass parameters to custom validators for example right now we are forbidding the string admin in the user name but there could be another field that it's the string password so we should be able to pass in the string we want to forbid as a parameter to our custom validator let's see how to do that I'm going to go back to vs code and go back to user name dot validator TS now we have seen how to create a validator function but the drawback of a validator function is that it can accept only one parameter which is the form control so we cannot simply pass in a second parameter instead what we have to do is create a factory function that accepts a string as a parameter and returns the validator function itself now that sounds way more complicated than it actually is so let me help you understand with code first start with the function that accepts a parameter of type reg X which is the pattern we have to validate against let's call the parameter forbidden name this function returns a validator function so the return type is validator function make sure to import it from angular slash forms for the function body we simply copy/paste the validator function we have already created next add the arrow syntax after the return type to convert this into a proper function so after null fat arrow next make sure to return the validator function and export the factory function so let's return this and export this let me also get rid of the old function finally make use of the forbidden name parameter instead of the hard-coded admin reg X so replace admin with forbidden name so we have created a function which returns a validator function or in complicated words we have created a factory function now in the form control we can specify the pattern as a parameter and the pattern is the string password now if you save this and take a look at the browser you can see that when I type password we get the error password username not allowed all right that is how you create a custom validator with parameters in reactive forms thank you guys for watching don't first we do

Channel: Codevolution

Views: 84,588

Keywords: Codevolution, Angular, Angular Forms, Angular Tutorial, Angular Forms Tutorial, Angular Tutorial for Beginners, Reactive Forms, Angular Reactive Forms, Reactive Forms Validation

Id: nm-x8gsqB2E

Length: 9min 5sec (545 seconds)

Published: Mon Oct 08 2018