Validators for angular directives

Prerequisites

TypeScript 1.8.10

How to use

Import the module.

Add the module as a dependency to your angular project.

There are five custom validators:

Maximum and minimum value

Validates the given value against a set max/min value. The set max/min value can be dynamic e.g. set through variable reference:

Example with ngMessages:

<form name="myForm">
    <input name="maxval" ng-model="ctrl.value" max-value="{{ctrl.myMaxValue}}"/>
    <div class="validation-messages" ng-messages="myForm.maxval.$error" ng-if="myForm.maxval.$invalid">
        <span ng-message="maxValue">Number is too big</span>
    </div>
</form>

Integer

Validates that the given value is an integer.

Example with ngMessages:

<form name="myForm">
    <input name="int" ng-model="ctrl.value" integer/>
    <div class="validation-messages" ng-messages="myForm.int.$error" ng-if="myForm.int.$invalid">
        <span ng-message="integer">Number is too big</span>
    </div>
</form>

Minute format

Validates that the input is in the format 00:00.

Example with ngMessages:

<form name="myForm">
    <input name="minute" ng-model="ctrl.value" minute-format/>
    <div class="validation-messages" ng-messages="myForm.minute.$error" ng-if="myForm.minute.$invalid">
        <span ng-message="minuteFormat">Number is too big</span>
    </div>
</form>

24 hour format

Validates that the input is in the format 00:00.

Example with ngMessages:

<form name="myForm">
    <input name="hour" ng-model="ctrl.value" 24-hour-format/>
    <div class="validation-messages" ng-messages="myForm.hour.$error" ng-if="myForm.hour.$invalid">
        <span ng-message="24HourFormat">Number is too big</span>
    </div>
</form>