Working Service Examples

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" />.

Service (ngController)

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

  // you can create indepent call to the validation service
  myValidation.addValidator({
    elmName: 'input2',
    // friendlyName: $translate.instant('FIRST_NAME'),
    debounce: 3000,
    scope: $scope,
    rules: 'numeric_signed|required'
  });

  // you can also chain validation service and add multiple validators at once
  // we optionally start by defining some global options. Note: each validator can overwrite individually these properties (ex.: validatorX can have a `debounce` different than the global set)
  // there is 2 ways to write a call... #1 with elementName & rules defined as 2 strings arguments ... #2 with 1 object as argument (with defined property names)
  //    #1 .addValidtor('myElementName', 'myRules') ... #2 .addValidator({ elmName: 'inputX', rules: 'myRules'})
  // the available object properties are the exact same set as the directive except that they are camelCase
  myValidation
    .setGlobalOptions({ debounce: 1500, scope: $scope, preValidateFormElements: false, displayOnlyLastErrorMsg: false })
    .addValidator('input3', 'float_signed|between_num:-0.6,99.5|required')
    .addValidator('input4', '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')
    .addValidator('input5', 'email|required|min_len:6', $translate.instant('EMAIL')); // use 3rd argument for a friendlyName

  // you can also remove a Validator with an ngClick or whichever way you prefer by calling .removeValidator()
  $scope.removeInputValidator = function ( elmName ) {
    // 1st argument is the object holding our $validationSummary `$scope.yourFormName`
    //   If your form does not have a name attribute, your only choice is to use `$scope` as argument
    // 2nd argument, remove a single element (string)
    //    OR you can also remove multiple elements through an array type .removeValidator($scope.form1, ['input2','input3'])
    myValidation.removeValidator($scope.form1, elmName);
  };
});

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 setGlobalOptions
myValidation.setGlobalOptions({ scope: $scope, displayOnlyLastErrorMsg: false })

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