feat(NgModel): introduce the $validators pipeline

Author: matsko

src/ng/directive/input.js

@@ -1435,6 +1435,12 @@ var VALID_CLASS = 'ng-valid',
  * ngModel.$formatters.push(formatter);
  * ```
  *
+ * @property {Object.<string, function>} $validators A collection of validators that are applied
+ *      whenever the model value changes. The key value within the object refers to the name of the
+ *      validator while the function refers to the validation operation. The validation operation is
+ *      provided with the model value as an argument and must return a true or false value depending
+ *      on the response of that validation.
+ *
  * @property {Array.<Function>} $viewChangeListeners Array of functions to execute whenever the
  *     view value has changed. It is called with no arguments, and its return value is ignored.
  *     This can be used in place of additional $watches against the model value.
@@ -1551,6 +1557,7 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
     function($scope, $exceptionHandler, $attr, $element, $parse, $animate, $timeout) {
   this.$viewValue = Number.NaN;
   this.$modelValue = Number.NaN;
+  this.$validators = {};
   this.$parsers = [];
   this.$formatters = [];
   this.$viewChangeListeners = [];
@@ -1626,7 +1633,8 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
    * Change the validity state, and notifies the form when the control changes validity. (i.e. it
    * does not notify form if given validator is already marked as invalid).
    *
-   * This method should be called by validators - i.e. the parser or formatter functions.
+   * This method can be called within $parsers/$formatters. However, if possible, please use the
+   *        `ngModel.$validators` pipeline which is designed to handle validations with true/false values.
    *
    * @param {string} validationErrorKey Name of the validator. the `validationErrorKey` will assign
    *        to `$error[validationErrorKey]=isValid` so that it is available for data-binding.
@@ -1743,6 +1751,24 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
     ctrl.$render();
   };
 
+  /**
+   * @ngdoc method
+   * @name ngModel.NgModelController#$validate
+   *
+   * @description
+   * Runs each of the registered validations set on the $validators object.
+   */
+  this.$validate = function(modelValue, viewValue) {
+    if(arguments.length === 0) {
+      modelValue = ctrl.$modelValue;
+      viewValue = ctrl.$viewValue;
+    }
+
+    forEach(ctrl.$validators, function(fn, name) {
+      ctrl.$setValidity(name, fn(modelValue, viewValue));
+    });
+  };
+
   /**
    * @ngdoc method
    * @name ngModel.NgModelController#$commitViewValue
@@ -1755,12 +1781,12 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
    * usually handles calling this in response to input events.
    */
   this.$commitViewValue = function() {
-    var value = ctrl.$viewValue;
+    var viewValue = ctrl.$viewValue;
     $timeout.cancel(pendingDebounce);
-    if (ctrl.$$lastCommittedViewValue === value) {
+    if (ctrl.$$lastCommittedViewValue === viewValue) {
       return;
     }
-    ctrl.$$lastCommittedViewValue = value;
+    ctrl.$$lastCommittedViewValue = viewValue;
 
     // change to dirty
     if (ctrl.$pristine) {
@@ -1771,13 +1797,19 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
       parentForm.$setDirty();
     }
 
+    var modelValue = viewValue;
     forEach(ctrl.$parsers, function(fn) {
-      value = fn(value);
+      modelValue = fn(modelValue);
     });
 
-    if (ctrl.$modelValue !== value) {
-      ctrl.$modelValue = value;
-      ngModelSet($scope, value);
+    if (ctrl.$modelValue !== modelValue &&
+        (isUndefined(ctrl.$$invalidModelValue) || ctrl.$$invalidModelValue != modelValue)) {
+
+      ctrl.$validate(modelValue, viewValue);
+      ctrl.$modelValue         = ctrl.$valid ? modelValue : undefined;
+      ctrl.$$invalidModelValue = ctrl.$valid ? undefined : modelValue;
+
+      ngModelSet($scope, ctrl.$modelValue);
       forEach(ctrl.$viewChangeListeners, function(listener) {
         try {
           listener();
@@ -1851,26 +1883,31 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
 
   // model -> value
   $scope.$watch(function ngModelWatch() {
-    var value = ngModelGet($scope);
+    var modelValue = ngModelGet($scope);
 
     // if scope model value and ngModel value are out of sync
-    if (ctrl.$modelValue !== value) {
+    if (ctrl.$modelValue !== modelValue &&
+        (isUndefined(ctrl.$$invalidModelValue) || ctrl.$$invalidModelValue != modelValue)) {
 
       var formatters = ctrl.$formatters,
           idx = formatters.length;
 
-      ctrl.$modelValue = value;
+      var viewValue = modelValue;
       while(idx--) {
-        value = formatters[idx](value);
+        viewValue = formatters[idx](viewValue);
       }
 
-      if (ctrl.$viewValue !== value) {
-        ctrl.$viewValue = ctrl.$$lastCommittedViewValue = value;
+      ctrl.$validate(modelValue, viewValue);
+      ctrl.$modelValue         = ctrl.$valid ? modelValue : undefined;
+      ctrl.$$invalidModelValue = ctrl.$valid ? undefined : modelValue;
+
+      if (ctrl.$viewValue !== viewValue) {
+        ctrl.$viewValue = ctrl.$$lastCommittedViewValue = viewValue;
         ctrl.$render();
       }
     }
 
-    return value;
+    return modelValue;
   });
 }];
 

test/ng/directive/inputSpec.js

@@ -261,6 +261,155 @@ describe('NgModelController', function() {
       expect(ctrl.$render).toHaveBeenCalledOnce();
     });
   });
+
+  describe('$validators', function() {
+
+    it('should perform validations when $validate() is called', function() {
+      ctrl.$validators.uppercase = function(value) {
+        return (/^[A-Z]+$/).test(value);
+      };
+
+      ctrl.$modelValue = 'test';
+      ctrl.$validate();
+
+      expect(ctrl.$valid).toBe(false);
+
+      ctrl.$modelValue = 'TEST';
+      ctrl.$validate();
+
+      expect(ctrl.$valid).toBe(true);
+    });
+
+    it('should perform validations when $validate() is called', function() {
+      ctrl.$validators.uppercase = function(value) {
+        return (/^[A-Z]+$/).test(value);
+      };
+
+      ctrl.$modelValue = 'test';
+      ctrl.$validate();
+
+      expect(ctrl.$valid).toBe(false);
+
+      ctrl.$modelValue = 'TEST';
+      ctrl.$validate();
+
+      expect(ctrl.$valid).toBe(true);
+    });
+
+    it('should always perform validations using the parsed model value', function() {
+      var captures;
+      ctrl.$validators.raw = function() {
+        captures = arguments;
+        return captures[0];
+      };
+
+      ctrl.$parsers.push(function(value) {
+        return value.toUpperCase();
+      });
+
+      ctrl.$setViewValue('my-value');
+
+      expect(captures).toEqual(['MY-VALUE', 'my-value']);
+    });
+
+    it('should always perform validations using the formatted view value', function() {
+      var captures;
+      ctrl.$validators.raw = function() {
+        captures = arguments;
+        return captures[0];
+      };
+
+      ctrl.$formatters.push(function(value) {
+        return value + '...';
+      });
+
+      scope.$apply(function() {
+        scope.value = 'matias';
+      });
+
+      expect(captures).toEqual(['matias', 'matias...']);
+    });
+
+    it('should only perform validations if the view value is different', function() {
+      var count = 0;
+      ctrl.$validators.countMe = function() {
+        count++;
+      };
+
+      ctrl.$setViewValue('my-value');
+      expect(count).toBe(1);
+
+      ctrl.$setViewValue('my-value');
+      expect(count).toBe(1);
+
+      ctrl.$setViewValue('your-value');
+      expect(count).toBe(2);
+    });
+
+    it('should perform validations twice each time the model value changes within a digest', function() {
+      var count = 0;
+      ctrl.$validators.number = function(value) {
+        count++;
+        return (/^\d+$/).test(value);
+      };
+
+      function val(v) {
+        scope.$apply(function() {
+          scope.value = v;
+        });
+      }
+
+      val('');
+      expect(count).toBe(1);
+
+      val(1);
+      expect(count).toBe(2);
+
+      val(1);
+      expect(count).toBe(2);
+
+      val('');
+      expect(count).toBe(3);
+    });
+
+    it('should only validate to true if all validations are true', function() {
+      var curry = function(v) {
+        return function() {
+          return v;
+        };
+      };
+
+      ctrl.$validators.a = curry(true);
+      ctrl.$validators.b = curry(true);
+      ctrl.$validators.c = curry(false);
+
+      ctrl.$validate();
+      expect(ctrl.$valid).toBe(false);
+
+      ctrl.$validators.c = curry(true);
+
+      ctrl.$validate();
+      expect(ctrl.$valid).toBe(true);
+    });
+
+    it('should register invalid validations on the $error object', function() {
+      var curry = function(v) {
+        return function() {
+          return v;
+        };
+      };
+
+      ctrl.$validators.unique = curry(false);
+      ctrl.$validators.tooLong = curry(false);
+      ctrl.$validators.notNumeric = curry(true);
+
+      ctrl.$validate();
+
+      expect(ctrl.$error.unique).toBe(true);
+      expect(ctrl.$error.tooLong).toBe(true);
+      expect(ctrl.$error.notNumeric).not.toBe(true);
+    });
+  });
 });
 
 describe('ngModel', function() {