Working Service Examples

P.S. For real live sample, see the live 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/testingFormService.html for a better separation. ####Service

  // 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 })
    .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);
  };

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