Let's Develop An Angular Application - Custom Validation In Reactive Forms

Introduction

 

In my previous article, I have explained about Angular reactive form validation. In this article, we will learn about custom validator in Angular reactive forms..

 

To read about Angular reactive forms validation, please read the below article.

• Validation in Reactive Forms

Custom validator is a function which will return a NULL if the control is valid and will return an object if it is invalid.

 

The validator function accepts a parameter – a FormGroup or FormControl.

 

We can use the abstract class AbstractContol to use either FormControl or FormGroup as a parameter.

 

The syntax for the validation function is given below.

function customValidatorSyntax(control: AbstractClass): {
    [key: string]: any
} | null {
    If(invalid data) {
        return {
            ‘
            customValidatonResult: True’
        };
    }
    return null;
}

The validator function will return an object of key-value pair. The key will be a string type and value will be any type.

 

We can use any logic inside the function. If the validation logic determines a pass, we will return a ‘null’

 

If the validation rule fails , we will return an object.

 

The key is a string and defines the name of the broken validation rule.

 

Then this validation rule will be added to the error collection of the FormControl or FormGroup.

 

Let’s create a validator function ‘nameValidator’ to check if the name contains invalid words.

 

I am using the same form created for my previous article. 

 

This validator can be used to check whether the name control contains the word ‘killer’ or not.

 

Please refer to the screenshot below.

 

 

Here, we are checking the value of the control passed into the validator function.

 

If the value contains the string ‘killer’, we will return an object.

 

The key is the validator name and the value is ‘killer’.

 

Next, we need to provide the validator name in ‘name’ FormControl() constructor.

 

Please refer to the screenshot below..

 

 

Here, this.nameValidator is the name of the validator function.

 

Then, let’s add an em tag to display the validation message for the custom validator

 

 

Save the files and check the validation in browser.

 

Type a name with word ’killer’ in name field. Our custom validation message will be displayed.

 

Please refer to the screenshot below.

 

 

We can access the value of the validator by using the validator name.

 

Use the below statement for this.

{{ userForm.controls.name.errors.nameValidator }}

Please refer the screenshot below.

 

 

Now the value of the custom validator will be displayed in the validation message.

 

 

Pass inputs into the Custom Validator Function

 

We can pass inputs into the custom validator function.

 

Let’s change the custom validator function to accept an array of invalid words and modify the function logic to loop through all the invalid words in the array and check whether any of them are present in the name input value.

 

Please refer to the modified function definition below.

 

 

The function ‘nameValidator’ will accept an array of invalid words and return a validation function.

 

Inside the function we will loop through the invalid words in the array and check whether any invalid word is present in the name value. If present, the word will be added to another array- invalidwords.

 

Finally, if the invalidwords array contains any value , we will return an object with key as ‘nameValidator’ and value as invalidwords array elements as a comma separated string.

 

Next , we need to pass the invalid words array as a parameter in validator function.

 

Please refer to the screenshot below.

 

 

Check the result in browser.

 

Type a name including any of the invalid words mentioned in the validator function as below screenshot.

 

The validation message will display all the invalid words in the name input value.

 

Please refer to the screenshot below.

 

 

Conclusion

 

In this article, we have learned how to create custom validation rule in angular reactive forms.

 

Happy Learning