Angular 2 custom validator with parameters

Question

How do I create let's say my own maxLength validator in Angular 2? All examples I could find use validators similar to 'required' one meaning that they already know the rules. They only accept one param - the control itself. How do I pass more parameters?

Here's the sample validator I have. How do I modify it to pass number 5 as a parameter?

export class MyValidators {
    static minValue(control:Control): {[s: string]: boolean} {
        var num = +control.value;
        if (isNaN(num) || num < 5 ) { return {"minValue": true}; }
        return null;
    }
}

Francesco Borzi · Accepted Answer · 2017-09-16 11:06:05Z

47

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.

edited Sep 16, 2017 at 11:06

Francesco Borzi

63.2k56 gold badges203 silver badges280 bronze badges

answered Apr 21, 2016 at 2:18

TGH

39.4k13 gold badges106 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ankit Singh Over a year ago

minValueValidator = (min: number) => {} would be better ?!

rook Over a year ago

That works. Thank you! I also added isNaN check and replaced 'export const' with 'static' to make it a member of a class.

TGH Over a year ago

Updated to include NAN check

d-man Over a year ago

how can i pass variable value to this validator ? i notice it always expects string constant like <elem minValueValidator="5"> and won't let me do <elem minValueValidator={{a}}>

Sjoerd de Wit Over a year ago

This won't work with the AOT compiler since lambda isn't supported: angular.io/guide/aot-compiler

Nuke Goldstein · Accepted Answer · 2017-03-07 14:39:39Z

4

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';

answered Mar 7, 2017 at 14:39

Nuke Goldstein

1043 bronze badges

Comments

Brian Hanna · Accepted Answer · 2019-12-02 16:25:56Z

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>

Collectives™ on Stack Overflow

Angular 2 custom validator with parameters

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related