Angular 2 custom validator with parameters Angular 2 custom validator with parameters angular angular

Angular 2 custom validator with parameters


Here is a sample. It's a min value validator where you pass in a number to validate.

import {Control} from 'angular2/common';export const minValueValidator = (min:number) => {  return (control:Control) => {    var num = +control.value;    if(isNaN(num) || num < min){      return {         minValue: {valid: false}      };    }    return null;  };};

More details can be found in the Custom Validators official documentation page.


The minValueValidator example basically shows that you can use a factory for your custom validator so it will be something like this:

static minValue = (num: Number) => {    return (control:Control) => {         var num = control.value;         if (isNaN(num) || num < 5 ) { return {"minValue": true}; }         return null;    }}

In my case I use FormControl not Control

import { FormControl } from '@angular/forms';


Another solution here that uses a little more Angular nuance:

  static minValue(min: number): ValidatorFn {    return (control: AbstractControl): ValidationErrors | null => {      if (control.value == null || control.value == '') {        //avoid validation if empty, we are not testing for required here        return null;      }      const errors: ValidationErrors = {};      let num = +control.value;      if (isNaN(num) || num < min) {        errors.isLessThanMin = {          message: `Number must be greater that ${min}`        };      }      return Object.keys(errors).length ? errors : null;    };  }

Now you have a much more reusable html error message

<div *ngIf="control.errors.isLessThanMin>{{control.errors.isLessThanMin.message}}</div>