Angular 2 – Custom Validators

Angular 2 has minimum pack of form field validators:

  • required
  • minlength
  • maxlength
  • pattern

I’ve stumbled across this github project that will add some nice angular 2 validators.

extend validators

  • rangeLength
  • min
  • max
  • range
  • digits
  • number
  • url
  • email
  • date
  • minDate
  • maxDate
  • dateISO
  • creditCard
  • json
  • base64
  • phone
  • uuid
  • equal
  • equalTo
import { CustomFormsModule } from 'ng2-validation'

for example (template driven)


<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel"
 [rangeLength]="[5, 9]"/>
<p *ngIf="field.errors?.rangeLength">error messagep>

The idea is to have directives that add validation functionality to the
form fields.

for example (model driven)

//don't forget to import the following in your module
import { ReactiveFormsModule } from '@angular/forms';

this.form = new FormGroup({
            field: new FormControl('', CustomValidators.range([5, 9]))

Read all about it here:


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