Inputs (local options)

All the possible options (or attributes) that can be defined locally to each Form Elements (inputs)

Debounce

Debounce is the timeout delay after which the user stop typing, the validation will then come in play. By default Angular-Validation as a debounce of 1 second and so by default the user will not be annoyed by validation errors until he stops typing for a second. The number passed to the debounce is defined in millisecond (1000ms = 1sec).

This property can also be redefined in the Global Options.

Directive

<!-- Debounce of 5sec -->
<input type="text" name="input1" ng-model="input1" debounce="5000" validation="integer|required" />

Service

// inject the ValidationService inside your Controller
myApp.controller('Ctrl', function ($scope, ValidationService) {
  // start by creating the service
  var myValidation = new ValidationService();

  // adding a validator and passing the debounce of 5sec
  myValidation.addValidator({ elmName: 'input2', debounce: 5000, rules: 'numeric_signed|required' });
});

Validation-Callback

Validation-callback is mainly use because Angular-Validation has a defauult debounce of a second which basically waits for the user inactivity. We basically run another function after the validation is done (or resolved since internally, it's a promise)

Directive

<input name="input1" validation-callback="myCallback()" ng-model="input1" validation="required" />

Friendly-Name

Friendly name as the name suggest is to give more friendly input names, because a name of "input1" might not mean much to the user, a name of "First Name" is a much more friendly name to read and could also be used in the Validation Summary as well. ######Directive

<input name="input1" friendly-name="{{ FIRST_NAME | translate }}" ng-model="input1" validation="required" />

Service

  // start by creating the service
  var myValidation = new ValidationService();

  // adding a validator and passing the friendlyName of 5sec
  // NOTE: in the Service, properties are declared as camelCase as every AngularJS
  myValidation.addValidator({ elmName: 'input2', friendlyName: $translate.instant('FIRST_NAME'), rules: 'required' });

Validation-Error-To

Angular-Validation create it's own after your input element, but in some cases you might want to define your own since in some cases, it could break some of the UI display. I encounter the problem myself when using Bootstrap on inputs with input-group, it has so much wrapping around the input that the next available element might not be the one we want. In these special occasions, we will add a <span> or a <div> for displaying the possible error and give the this element an id="someId" or a class="className" and then reference it inside our input. We could actually move the error element anywhere we want with this method, just don't forget to name it with an id or a className and call the validation-error-to attribute. This attribute could be called in 3 different ways: with '.' (element error className) or with/without '#' (element error id) We could even do a validation summary with this...just saying hehe.

Directive

<div class="form-group" ng-hide="trsn.isDividend">
    <label for="input1">Search Input with BS input-groups</label>
    <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" name="input1" ng-model="form1.input1"
          validation="min_len:2|max_len:10|alpha_dash_spaces|required"
          validation-error-to="myErrorId" />
        <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
    </div>
    <span id="myErrorId" class="validation text-danger"></span>
</div>

<!-- 3 ways of writting it, 2 ways for ID, 1 way for className -->
<!-- with an ID -->
<input name="input1" validation="validator1" validation-error-to="myErrorId" />
<input name="input1" validation="validator1" validation-error-to="#myErrorId" />
<span id="myErrorId" class="validation text-danger"></span>

<!-- or with a className -->
<input name="input1" validation="validator1" validation-error-to=".errorClassName" />
<span class="errorClassName validation text-danger"></span>

<!-- or even better, since this directive use a pattern of className named as "validation-yourInputName" -->
<!-- you could create only the `<span>` and ommit/skip the `validation-error-to=""` attribute within the input -->
<input name="input1" validation="validator1" />
<span class="validation-input1 validation text-danger"></span>

Service

// start by creating the service
var vs = new ValidationService();

// when defining your validators, you can define the validationErrorTo property
// same as html attribute validation-error-to, but camelCase: validationErrorTo
vs.addValidator({
  elmName: 'input2',
  validationErrorTo: '.errorClassName' // for a class
})
.addValidator({
  elmName: 'input3',
  scope: $scope,
  validationErrorTo: '.myErrorId' // for an ID or use '#myErrorId'
});

Valid-Require-How-Many

Angular-Validation by default will loop through all Validators to validate the field and if 1 Validator fail, the field is then declared as invalid. But let say that we want to make the field valid as soon as 1 Validator (or more) is valid... how can we achieve that? Well we could use this attribute valid-require-how-many="1" to do just that, for example let's say we want to accept IPV4 or IPV6.

NOTE: You have to remember a simple thing though, if you add the Validator required to your list, you have to make your requirement to "2" since required is counted as 1... So that should be valid-require-how-many="2"

Directive

<input type="text" 
       name="input2"
       ng-model="input2"
       validation="ipv4|ipv6|required"
       valid-require-how-many="2" />

Service

myApp.controller('CtrlService', function ($scope, ValidationService) {
  // start by creating the service
  var vs = new ValidationService();

  vs.addValidator({
    elmName: 'input2',
    validRequireHowMany: 2,
    scope: $scope,
    rules: 'ipv4|ipv6|required'
  });
});

Validate-On-Empty

Sometime we don't want the field to always be required but we still want the field to be validated (mostly useful for custom and remote validators). You can define it as an attribute on your input or via a Global Option. Don't forget to pass "true" or "false" to the attribute

Directive

<input name="input1"
       ng-model="vm.tags"
       validation="custom:myCustomValidation"
       validate-on-empty="true" />

Service

// start by creating the service
var vs= new ValidationService();

// when defining your validators, you can define the validationErrorTo property
// same as html attribute validation-error-to, but camelCase: validationErrorTo
vs.addValidator({
  elmName: 'input2',
  validateOnEmpty: true
});

Validation-Array-Objprop

Used only when validating an external 3rd party addon (like ngTagsInput)

Directive

<!-- ngTagsInput external 3rd party addon -->
<!-- reference 'manufacturer' as the object property -->
<tags-input 
        name="input1"
        ng-model="vm.tags"
        validation="in_list:Acer,Lenovo,Toshiba|required"
        validation-array-objprop="manufacturer">
  </tags-input>

Valid-Array-Require-How-Many

Used in combo with `validation-array-objprop', if user want to specify how many values it needs for the complete input to become valid. User can specify one or all in that argument.

Directive

<!-- ngTagsInput external 3rd party addon -->
<!-- all values will be validated against the following conditions -->
<!-- accept only alphanumeric+space and maximum length of 50 characters -->
<tags-input 
        name="input1"
        ng-model="vm.tags"
        validation="alpha_space|max_len:50|required"
        validation-array-objprop="manufacturer"
        valid-array-require-how-many="all">
  </tags-input>