Custom Validators for Angular 4

Interactive Business Systems is now Planet Technology. Looking for a new job? We work with some of the biggest names in tech, and we’re hiring! Check out our open jobs and make your next career move with Planet.

On a recent Angular 4 project I had the need to use some custom form validations.  Out of the box, Angular 4 contains validators for required, email, pattern, and min/max length, and it is possible to write your own validators as well.  In particular, the custom validation I needed to do was verify that two fields were equal.  For example, a form where the user enters a phone number, and then confirms the phone number in a second form field.  The custom validation would verify that the two text inputs had the same value.

Before writing my own validator for this, I did a quick search for something that already existed in the custom-validation space for Angular 4.  What I found was an npm package called ng2-validation. (npm site here).

ng-validation contains 25 different custom validators, and it works with both template and model driven forms – so whichever one you are using all of the validators will work.  It also happens to contain a validator called equalTo which fits my requirement for the phone number confirmation example.

To get started with ng2-validation, you need to import the CustomFormsModule in your app.module:

import { CustomFormsModule } from 'ng2-validation';

and then import the module

  declarations: [
  imports: [

Using Reactive Forms, the setup in the component would look like this:

const phone = new FormControl('', [Validators.required]);
this.form ={
    phone: phone,
    confirmPhone: ['', [CustomValidators.equalTo(phone)]]

So unless confirmPhone has the same value as phone, the confirmPhone field (and subsequently, the form) will be invalid. One thing to note: normally I do not create a separate object for each form field – I just define the initial value and validators with the setup (e.g. confirmPhone). However, from what I have seen equalTo requires that an actual FormControl instance be created and passed as the parameter to equalTo (e.g. phone = new FormControl(…).

I like the API for equalTo, plus it saved me the work of creating a custom validator for what amounts to a very common scenario.

Other custom validators that are part of the package include:

  • rangeLength
  • min
  • gt
  • gte
  • max
  • lt
  • lte
  • range
  • digits
  • number
  • url
  • email
  • date
  • minDate
  • maxDate
  • dateISO
  • creditCard
  • json
  • base64
  • phone
  • uuid
  • equal
  • notEqual
  • equalTo
  • notEqualTo

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s