Developer Guide: Templates: Understanding Angular Validators

Work in Progress This page is currently being revised. It might be incomplete or contain inaccuracies.

Angular validators are attributes that test the validity of different types of user input. Angular provides a set of built-in input validators:

You can also create your own custom validators.

Using Angular Validators

You can use angular validators in HTML template bindings, and in JavaScript:

<input ng:validator="validator_type:parameters" [...]>
angular.validator.[validator_type](parameters)

The following example shows how to use the built-in angular integer validator:

 Change me: <input type="text" name="number" ng:validate="integer" value="123">
 it('should validate the default number string', function() {
   expect(element('input[name=number]').attr('class')).
      not().toMatch(/ng-validation-error/);
 });
 it('should not validate "foo"', function() {
   input('number').enter('foo');
   expect(element('input[name=number]').attr('class')).
      toMatch(/ng-validation-error/);
 });

Creating an Angular Validator

To create a custom validator, you simply add your validator code as a method onto the angular.validator object and provide input(s) for the validator function. Each input provided is treated as an argument to the validator function. Any additional inputs should be separated by commas.

The following bit of pseudo-code shows how to set up a custom validator:

angular.validator('your_validator', function(input [,additional params]) {
        [your validation code];
        if ( [validation succeeds] ) {
                return false;
        } else {
                return true; // No error message specified
                          }
}

Note that this validator returns "true" when the user's input is incorrect, as in "Yes, it's true, there was a problem with that input". If you prefer to provide more information when a validator detects a problem with input, you can specify an error message in the validator that angular will display when the user hovers over the input widget.

To specify an error message, replace "return true;" with an error string, for example:

  return "Must be a value between 1 and 5!";

Following is a sample UPS Tracking Number validator:

<script>
angular.validator('upsTrackingNo', function(input, format) {
  var regexp = new RegExp("^" + format.replace(/9/g, '\\d') + "$");
  return input.match(regexp)?"":"The format must match " + format;
});
</script>
<input type="text" name="trackNo" size="40"
     ng:validate="upsTrackingNo:'1Z 999 999 99 9999 999 9'"
     value="1Z 123 456 78 9012 345 6"/>
it('should validate correct UPS tracking number', function() {
 expect(element('input[name=trackNo]').attr('class')).
    not().toMatch(/ng-validation-error/);
});

it('should not validate in correct UPS tracking number', function() {
 input('trackNo').enter('foo');
 expect(element('input[name=trackNo]').attr('class')).
    toMatch(/ng-validation-error/);
});

In this sample validator, we specify a regular expression against which to test the user's input. Note that when the user's input matches regexp, the function returns "false" (""); otherwise it returns the specified error message ("true").

Note: you can also access the current angular scope and DOM element objects in your validator functions as follows:

Related Topics

Related API