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)

rangeLength

<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:

ng2-validation

Angular 4

angular2

Hi everyone. This is my new blog about Angular 2/4.
During my work with Angular 2 , I encounter many issues that result in long searches for answers on the web.
So i’ve decided to write about those issues, and hopefully that could help others.