Working Directive Examples

Let's start with a simple example and then let's get down to real business.

P.S. For real live sample, see the live Plunker demo or download the Github project and run the index.html (on the exception of Chrome who doesn't want to run http outside of webserver) while the actual forms are inside the \templates\ folder for a better code separation.

Demo

You can find a Plunker Demo here

Requirements

Angular-Validation requires the element which will use validation to have an html name="" attribute, so that in the background it can use this name to create and show an error into a <span> which will directly follow your form input. For example: <input name="input1" ng-model="input1" validation="required" />.

Directive (html)

<!-- example 1 -->
<!-- optionally add a friendly-name to your elements, will be used in ValidationSummary  -->
<input type="test" name="input1" friendly-name="{{ FIRST_NAME | translate }}"
    ng-model="input3" validation="alpha_dash|min_len:2|required" />

<!-- example 2 -->
<!-- change the debounce or typing-limit (timer in ms of inactivity) after which will trigger the validation check -->
<label for="input1">Simple Integer -- debounce(5sec)</label>
<input type="text" name="input1" ng-model="form1.input1" debounce="5000" validation="integer|required" />

<!-- example 3 -->
<label for="input2">email + min(3) + max(10) + required</label>
<input type="text" name="input2" ng-model="form1.input2" validation="email|min_len:3|max_len:10|required"  />

<!-- example 4 -->
<!-- between_num could also be written with 2 conditions of min_num:n|max_num:n ... same goes to between_len -->
<label for="input3">Float only + between(min,max) + required</label>
<input type="number" name="input3" ng-model="form1.input3" validation="numeric|between_num:6,99.9|required"  />

<!-- example 5 -->
<!-- input match confirmation (ex.: password confirmation) -->
<!-- match validator can use 1 or 2 params (match:field1 ..OR.. match:field1,Text to Display) -->
<!-- when using 2 params (separated by comma ',') then 2nd param is used as text to display -->
<label for="input4">Password</label>
<input type="password" name="input4" ng-model="form1.input4" validation="alpha|min_len:4|required"  />
<label for="input4c">Password Confirmation</label>
<input type="password" name="input4c" ng-model="form1.input4c" validation="match:form1.input4,Password not match|required"  />

<!-- example 6 - with Regular Expression (Date Code of YYWW) -->
<label for="input5">Multiple Validations + Custom Regex of Date Code (YYWW)</label>
<input type="text" name="input5" ng-model="form1.input5"
		validation="exact_len:4|regex:YYWW:=^(0[9]|1[0-9]|2[0-9]|3[0-9])(5[0-2]|[0-4][0-9])$:regex|required|integer"  />

<!-- example 7 - required select option (dropdown) -->
<div class="form-group">
    <label for="select1">Select Option Required</label>
    <select id="stk_type" name="stk_type" class="form-control" ng-model="form1.select1" validation="required">
        <option value="">...</option>
        <option value="1">Option #1</option>
        <option value="2">Option #2</option>
    </select>
</div>

<!-- EXPLANATIONS -->
<!-- <input> need the <validation=""> each validators are separated by a pipe | -->
<input validation="validator1|validator2|..." />

<!-- Example -->
<input type="text" name="input1" />
<!-- The directive will create by itself the following element, with a className of "validation-inputName" to display the error -->
<!-- You could easily apply styling as you see fit, using the className of "validation" and/or "validation text-danger" -->
<span class="validation-input1 validation text-danger">error message here</span>

<!-- EXCEPTIONS: We could also use our own custom <span> or <div> element when needed, for example input groups wrapper, see next step -->

ControllerAs syntax

You might be interested in the ControllerAs syntax, for more details just go on the page: Wiki - ControllerAs syntax

Display only last error message on each element

You might find that there is too many error messages showing on your elements, you could optionally only display the last error message with the following:

// simply specify it inside your Global Options
$scope.$validationOptions = { displayOnlyLastErrorMsg: false };

Global Options

To change default options globally, you can use the $scope.$validationOptions. These global options can be defined for both the Directive and/or the Service. For more details, go on the Wiki - Global Options

myApp.controller('Ctrl', function ($scope) {
  $scope.$validationOptions = { 
    debounce: 1500,                // set the debounce globally
    displayOnlyLastErrorMsg: false // display only last error message on each element (false by default)
    preValidateFormElements: false // pre-validate all form elements, false by default
  }; 
});

What if the default behavior of error element displaying (by Angular-Validation) does not fit your needs?

In some cases the default behavior (by Angular-Validation) of creating a <span> for error display right after our element to validate, does not always work. Some examples are:

• Using Bootstrap and input-group
• We don't want our error right after our element, we want it elsewhere
• Anything else that does not work with default behavior

For that matter, please look at Bootstrap Input Groups Wrapping