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 form with validation is inside templates/testingFormDirective.html for a better separation.

To define the debounce globally (for all form elements), you could use $scope.$validationOptions = { debounce: 1500 }; or set it independently on each element <input debounce="1500" ... />

<!-- 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 -->

###What to do when 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 Editing Bootstrap Input Groups Wrapping

###Global Options To change default options, you can change the $scope.$validationOptions, currently only supporting the debounce option but this might expand in the future. These global options can be defined from both the Directive or the Service.

myApp.controller('Ctrl', function ($scope) {
  $scope.$validationOptions = { debounce: 1500 }; // set the debounce globally
});