Custom Validators for Angular 4

Rick HerrmannOn 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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    SharedModule,
    CustomFormsModule
  ]

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

const phone = new FormControl('', [Validators.required]);
this.form = this.fb.group({
    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 fb.group 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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s