Enhancement #47 - ControllerAs syntax and fixed #48

- Enhancement #47 - New option to use the ControllerAs syntax.
- Also fixed issue #48

Author: ghiscoding

app.js

@@ -6,7 +6,7 @@ myApp.config(['$compileProvider', '$locationProvider', '$routeProvider', functio
     $compileProvider.debugInfoEnabled(false);
     $routeProvider
       .when('/validate-directive', { templateUrl: 'templates/testingFormDirective.html', controller: 'CtrlValidationDirective' })
-      .when('/validate-2forms', { templateUrl: 'templates/testing2Forms.html', controller: 'Ctrl2forms' })
+      .when('/validate-2forms', { templateUrl: 'templates/testing2Forms.html', controller: 'Ctrl2forms as vm' })
       .when('/validate-ngRepeat', { templateUrl: 'templates/testingFormNgRepeat.html', controller: 'CtrlNgRepeat' })
       .when('/validate-service', { templateUrl: 'templates/testingFormService.html', controller: 'CtrlValidationService' })
       .otherwise({ redirectTo: 'validate-directive'  });
@@ -80,21 +80,24 @@ myApp.controller('CtrlValidationDirective', ['$q', '$scope', 'validationService'
 }]);
 
 // -- Controller to use Angular-Validation Directive with 2 forms
+// on this page we will pre-validate the form and show all errors on page load
 // ---------------------------------------------------------------
 myApp.controller('Ctrl2forms', ['$scope', 'validationService', function ($scope, validationService) {
-  // on this page we will pre-validate the form and show all errors on page load
-  $scope.$validationOptions = { debounce: 500, preValidateFormElements: true };
+  var vm = this; // use the ControllerAs alias syntax
 
-  $scope.submitForm = function() {
-    if(new validationService().checkFormValidity($scope.form01)) {
+  // set the global options BEFORE any function declarations, we will prevalidate current form
+  var myValidationService = new validationService({ controllerAs: vm, debounce: 500, preValidateFormElements: true });
+
+  vm.submitForm = function() {
+    if(myValidationService.checkFormValidity(vm.form01)) {
       alert('All good, proceed with submit...');
     }
   }
-  $scope.resetForm = function(form) {
-    new validationService().resetForm(form, { emptyAllInputValues: true, removeAllValidators: true });
+  vm.resetForm = function(form) {
+    myValidationService.resetForm(form, { emptyAllInputValues: true, removeAllValidators: true });
   };
-  $scope.showValidationSummary = function () {
-    $scope.displayValidationSummary = true;
+  vm.showValidationSummary = function () {
+    vm.displayValidationSummary = true;
   }
 }]);
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-validation-ghiscoding",
-  "version": "1.3.35",
+  "version": "1.3.36",
   "author": "Ghislain B.",
   "description": "Angular-Validation Directive and Service (ghiscoding)",
   "main": [

changelog.txt

@@ -1,5 +1,6 @@
 Angular-Validation change logs
 
+1.3.36 (2015-07-20) Enhancement #47 - New option to use the ControllerAs syntax. Also fixed issue #48.
 1.3.35 (2015-07-15) Deprecated old implentation of `regex:...:regex` (though it still works) by a new and much better implementation of `pattern=` validator. Converted all the rules from string pattern to regex pattern (when possible) defined in `angular-validation.js`. Also fixed issue #45 on email check.
 1.3.34 (2015-07-08) Merge pull request #44 - Adding support to brazilian portuguese language.
 1.3.33 (2015-07-02) Reset isolatedScope on route change

dist/angular-validation.min.js

@@ -1,6 +1,6 @@
 {
   "name": "angular-validation-ghiscoding",
-  "version": "1.3.35",
+  "version": "1.3.36",
   "author": "Ghislain B.",
   "description": "Angular-Validation Directive and Service (ghiscoding)",
   "main": "app.js",

package.json

@@ -440,14 +440,14 @@
 
     it('Should show ValidationSummary and contain all error messages', function () {
       // showValidation checkbox should false at first but true after
-      var elmCheckboxShowSummary = element(by.model('displayValidationSummary'));
+      var elmCheckboxShowSummary = element(by.model('vm.displayValidationSummary'));
       expect(elmCheckboxShowSummary.isSelected()).toBeFalsy();
 
       var btnShowSummary = $('[name=btn_showValidation]');
       btnShowSummary.click();
       browser.waitForAngular();
 
-      elmCheckboxShowSummary = element(by.model('displayValidationSummary'));
+      elmCheckboxShowSummary = element(by.model('vm.displayValidationSummary'));
       expect(elmCheckboxShowSummary.isSelected()).toBeTruthy();
 
       // scroll back to top
@@ -513,7 +513,7 @@
       browser.waitForAngular();
 
       // showValidation checkbox should false at first but true after
-      var elmCheckboxShowSummary = element(by.model('displayValidationSummary'));
+      var elmCheckboxShowSummary = element(by.model('vm.displayValidationSummary'));
       expect(elmCheckboxShowSummary.isSelected()).toBeTruthy();
 
       // scroll back to top

protractor/mixed_validation_spec.js

@@ -1,5 +1,5 @@
 #Angular Validation (Directive / Service)
-`Version: 1.3.35`
+`Version: 1.3.36`
 ### Form validation after user inactivity of default 1sec. (customizable timeout)
 
 Forms Validation with Angular made easy! Angular-Validation is an angular directive/service with locales (languages) with a very simple approach of defining your `validation=""` directly within your element to validate (input, textarea, etc) and...that's it!!! The directive/service will take care of the rest!
@@ -85,6 +85,7 @@ All the documentation has been moved to the Wiki section, see the [github wiki](
 * Properties & Options
     * [Inputs (all local options)](https://github.com/ghiscoding/angular-validation/wiki/Inputs-(local-options))
     * [Global Options](https://github.com/ghiscoding/angular-validation/wiki/Global-Options)
+    * [ControllerAs Syntax](https://github.com/ghiscoding/angular-validation/wiki/ControllerAs-Syntax)
 * Validators
     * [Available Validator Rules](https://github.com/ghiscoding/angular-validation/wiki/Available-Validators-(rules))
     * [Custom Regular Expression Pattern](https://github.com/ghiscoding/angular-validation/wiki/Regular-Expression-Pattern)

readme.md

@@ -22,11 +22,12 @@ angular
     // watch on route change, then reset some global variables, so that we don't carry over other controller/view validations
     $rootScope.$on("$routeChangeStart", function (event, next, current) {
       if (!_bypassRootScopeReset) {
-        _globalOptions.displayOnlyLastErrorMsg = false; // reset the option of displaying only the last error message
-        _globalOptions.preValidateFormElements = false; // reset the option of pre-validate all form elements, false by default
-        _globalOptions.isolatedScope = null;            // reset used scope on route change
-        _globalOptions.scope = null;                    // reset used scope on route change
-
+        _globalOptions = {
+          displayOnlyLastErrorMsg: false, // reset the option of displaying only the last error message
+          preValidateFormElements: false, // reset the option of pre-validate all form elements, false by default
+          isolatedScope: null,            // reset used scope on route change
+          scope: null                     // reset used scope on route change
+        };
         _formElements = [];                             // array containing all form elements, valid or invalid
         _validationSummary = [];                        // array containing the list of invalid fields inside a validationSummary
       }
@@ -65,6 +66,7 @@ angular
     validationCommon.prototype.defineValidation = defineValidation;                                 // define our validation object
     validationCommon.prototype.getFormElementByName = getFormElementByName;                         // get the form element custom object by it's name
     validationCommon.prototype.getFormElements = getFormElements;                                   // get the array of form elements (custom objects)
+    validationCommon.prototype.getGlobalOptions = getGlobalOptions;                                 // get the global options used by all validators (usually called by the validationService)
     validationCommon.prototype.isFieldRequired = isFieldRequired;                                   // return boolean knowing if the current field is required
     validationCommon.prototype.initialize = initialize;                                             // initialize current object with passed arguments
     validationCommon.prototype.mergeObjects = mergeObjects;                                         // merge 2 javascript objects, Overwrites obj1's values with obj2's (basically Object2 as higher priority over Object1)
@@ -194,6 +196,14 @@ angular
       return _formElements;
     }
 
+    /** Get global options used by all validators
+     * @param object attrs: global options
+     * @return object self
+     */
+    function getGlobalOptions() {
+      return _globalOptions;
+    }
+
     /** Initialize the common object
      * @param object scope
      * @param object elm
@@ -263,13 +273,25 @@ angular
 
       self.scope.$validationSummary = _validationSummary;
 
-      // and also save it inside the current scope form (if found)
+      // overwrite the scope form (if found)
       if (!!form) {
         // since validationSummary contain errors of all forms
         // we need to find only the errors of current form and them into the current scope form object
         form.$validationSummary = arrayFindObjects(_validationSummary, 'formName', form.$name);
       }
 
+      // overwrite the ControllerAs alias if it was passed in the global options
+      if (!!_globalOptions && !!_globalOptions.controllerAs) {
+        _globalOptions.controllerAs.$validationSummary = _validationSummary;
+
+        // also overwrite it inside controllerAs form (if found)
+        if (!!form) {
+          var formName = form.$name.indexOf('.') >= 0 ? form.$name.split('.')[1] : form.$name;
+          _globalOptions.controllerAs[formName].$validationSummary = arrayFindObjects(_validationSummary, 'formName', form.$name);
+        }
+      }
+
+
       return _validationSummary;
     }
 
@@ -687,7 +709,7 @@ angular
         }
       }
 
-      // save validation summary scope root
+      // save validation summary into scope root
       self.scope.$validationSummary = _validationSummary;
 
       // and also save it inside the current scope form (if found)
@@ -697,6 +719,17 @@ angular
         form.$validationSummary = arrayFindObjects(_validationSummary, 'formName', form.$name);
       }
 
+      // also save it inside the ControllerAs alias if it was passed in the global options
+      if (!!_globalOptions && !!_globalOptions.controllerAs) {
+        _globalOptions.controllerAs.$validationSummary = _validationSummary;
+
+        // also save it inside controllerAs form (if found)
+        if (!!form) {
+          var formName = form.$name.indexOf('.') >= 0 ? form.$name.split('.')[1] : form.$name;
+          _globalOptions.controllerAs[formName].$validationSummary = arrayFindObjects(_validationSummary, 'formName', form.$name);
+        }
+      }
+
       return _validationSummary;
     }
 
@@ -753,6 +786,22 @@ angular
       return -1;
     }
 
+    /** Explode a '.' dot notation string to an object
+     * @param string str
+     * @parem object
+     * @return object
+     */
+    function explodedDotNotationStringToObject(str, obj) {
+      var split = str.split('.');
+
+      for (var k = 0, kln = split.length; k < kln; k++) {
+        if(!!obj[split[k]]) {
+          obj = obj[split[k]];
+        }
+      }
+      return obj;
+    }
+
     /** Get the element's parent Angular form (if found)
      * @param object self
      * @return object scope form
@@ -764,19 +813,31 @@ angular
 
       for (var i = 0; i < forms.length; i++) {
         var form = forms[i].form;
-        if (!!form && form.name && self.scope[form.name]) {
-          parentForm = self.scope[form.name];
-          if (typeof parentForm.$name === "undefined") {
-            parentForm.$name = form.name; // make sure it has a $name, since we use that variable later on
+
+        if (!!form && !!form.name) {
+          parentForm = (!!_globalOptions && !!_globalOptions.controllerAs && form.name.indexOf('.') >= 0)
+            ? explodedDotNotationStringToObject(form.name, self.scope)
+            : self.scope[form.name];
+
+          if(!!parentForm) {
+            if (typeof parentForm.$name === "undefined") {
+              parentForm.$name = form.name; // make sure it has a $name, since we use that variable later on
+            }
+            return parentForm;
           }
-          return parentForm;
         }
       }
 
       // falling here with a form name but without a form object found in the scope is often due to isolate scope
       // we can hack it and define our own form inside this isolate scope, in that way we can still use something like: isolateScope.form1.$validationSummary
       if (!!form && !!form.name) {
-        return self.scope[form.name] = { $name: form.name, specialNote: 'Created by Angular-Validation for Isolated Scope usage' };
+        var obj = { $name: form.name, specialNote: 'Created by Angular-Validation for Isolated Scope usage' };
+
+        if (!!_globalOptions && !!_globalOptions.controllerAs && form.name.indexOf('.') >= 0) {
+          var formSplit = form.name.split('.');
+          return self.scope[formSplit[0]][formSplit[1]] = obj
+        }
+        return self.scope[form.name] = obj;
       }
       return null;
     }

src/validation-common.js

@@ -71,7 +71,7 @@
 
           if (!formElmObj.isValidationCancelled) {
             // validate without delay
-            attemptToValidate(event.target.value, 0);
+            attemptToValidate(event.target.value, 10);
           }else {
             ctrl.$setValidity('validation', true);
           }

src/validation-directive.js

@@ -15,11 +15,16 @@ angular
     var _watchers = [];
 
     // service constructor
-    var validationService = function () {
+    var validationService = function (globalOptions) {
       this.isValidationCancelled = false;       // is the validation cancelled?
       this.timer = null;                        // timer of user inactivity time
       this.validationAttrs = {};                // Current Validator attributes
       this.commonObj = new validationCommon();  // Object of validationCommon service
+
+      // if global options were passed to the constructor
+      if (!!globalOptions) {
+        this.setGlobalOptions(globalOptions);
+      }
     }
 
     // list of available published public functions of this object
@@ -94,7 +99,7 @@ angular
         if (!formElmObj.isValidationCancelled) {
           // re-initialize to use current element & validate without delay
           self.commonObj.initialize(scope, attrs.elm, attrs, attrs.ctrl);
-          attemptToValidate(self, event.target.value, 0);
+          attemptToValidate(self, event.target.value, 10);
         }
       });
 
@@ -138,7 +143,7 @@ angular
       var self = this;
       var ctrl, elm, elmName = '', isValid = true;
       if(typeof obj === "undefined" || typeof obj.$validationSummary === "undefined") {
-        throw 'checkFormValidity() requires a valid Angular Form or $scope object passed as argument to work properly (ex.: $scope.form1  OR  $scope).';
+        throw 'checkFormValidity() requires a valid Angular Form or $scope/vm object passed as argument to work properly, for example:: fn($scope) OR fn($scope.form1) OR fn(vm) OR fn(vm.form1)';
       }
 
       // loop through $validationSummary and display errors when found on each field
@@ -170,7 +175,7 @@ angular
     function clearInvalidValidatorsInSummary(obj) {
       var self = this;
       if (typeof obj === "undefined" || typeof obj.$validationSummary === "undefined") {
-        throw 'clearInvalidValidatorsInSummary() requires a valid Angular Form or $scope object passed as argument to work properly (ex.: $scope.form1  OR  $scope).';
+        throw 'clearInvalidValidatorsInSummary() requires a valid Angular Form or $scope/vm object passed as argument to work properly, for example:: fn($scope) OR fn($scope.form1) OR fn(vm) OR fn(vm.form1)';
       }
       // Get list of names to remove
       var elmName = [];
@@ -196,7 +201,7 @@ angular
       var formElmObj;
 
       if(typeof obj === "undefined" || typeof obj.$validationSummary === "undefined") {
-        throw 'removeValidator() only works with Validation that were defined by the Service (not by the Directive) and requires a valid Angular Form or $scope object passed as argument to work properly (ex.: $scope.form1  OR  $scope).';
+        throw 'removeValidator() only works with Validation that were defined by the Service (not by the Directive) and requires a valid Angular Form or $scope/vm object passed as argument to work properly, for example:: fn($scope) OR fn($scope.form1) OR fn(vm) OR fn(vm.form1)';
       }
 
       // Note: removeAttr() will remove validation attribute from the DOM (if defined by Directive), but as no effect when defined by the Service