Web
Analytics
custom validators in angular 4 - Tutorial

For Consultation : +91 9887575540

Stay Connected :

Custom Validators in Angular 5

Validators in angular 5, can we apply using two approaches first one is through HTML5 predefined  validations (like required, pattern etc. ) the second one is by using angular form-control class or model-driven approach but angular 5 provides another way through which we can create our own custom validators which may have different functionality which does not exist into predefined validations. In custom validators, we write some functions that will return validation output values (validate the value). These functions take value as abstract control as input and return an object as output. After creation of a custom validator, we can pass the reference of it into various components where we want to apply it.

So in this tutorial, I am going to describe that how we can apply custom validator in angular application

Step 1: Create a new customvalidator.ts file in the src folder and add following code into that.

Step2. Create New Component(testcustomvalidator) and add following code to that

Testcustomvalidator.html

Step 3: Pass reference of newly created component reference as a template in app.component.html

Step 4: Run Program:

ng serve –open

Output

Custom Validator Output

Custom Validator Output

Select your currency