fix(input): add check for input value on blur

Closes #1201.
angular · Jan 15, 2015 · ec53d1a · ec53d1a
1 parent b432277
commit ec53d1a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 27 deletions.
diff --git a/src/components/input/input.js b/src/components/input/input.js
@@ -170,7 +170,7 @@ function inputTextareaDirective($mdUtil, $window, $compile, $animate) {
   function postLink(scope, element, attr, ctrls) {
 
     var containerCtrl = ctrls[0];
-    var ngModelCtrl = ctrls[1];
+    var ngModelCtrl = ctrls[1] || $mdUtil.fakeNgModel();
 
     if ( !containerCtrl ) return;
     if (containerCtrl.input) {
@@ -187,38 +187,31 @@ function inputTextareaDirective($mdUtil, $window, $compile, $animate) {
       setupTextarea();
     }
 
-    var isEmpty = ngModelCtrl ? 
-      ngModelCtrl.$isEmpty : 
-      function() { return ('' + element.val()).length === 0; };
-
-    // When the input value changes, check if it "has" a value, and
-    // set the appropriate class on the input group
-    if (ngModelCtrl) {
-      scope.$watch(function() {
-        return ngModelCtrl.$dirty && ngModelCtrl.$invalid;
-      }, containerCtrl.setInvalid);
-
-      ngModelCtrl.$formatters.push(checkHasValue);
-      ngModelCtrl.$parsers.push(checkHasValue);
-    } else {
-      checkHasValue();
+    function ngModelPipelineCheckValue(arg) {
+      containerCtrl.setHasValue(!ngModelCtrl.$isEmpty(arg));
+      return arg;
     }
-    element.on('input', checkHasValue);
-
-    function checkHasValue(value) {
-      containerCtrl.setHasValue(
-        !isEmpty(value) ||
-        (element[0].validity || {}).badInput // allow badInput to count as having a value.
-      );
-      return value;
+    function inputCheckValue() {
+      // An input's value counts if its length > 0,
+      // or if the input's validity state says it has bad input (eg string in a number input)
+      containerCtrl.setHasValue(element.val().length > 0 || (element[0].validity||{}).badInput);
     }
 
+    scope.$watch(function() {
+      return ngModelCtrl.$dirty && ngModelCtrl.$invalid;
+    }, containerCtrl.setInvalid);
+
+    ngModelCtrl.$parsers.push(ngModelPipelineCheckValue);
+    ngModelCtrl.$formatters.push(ngModelPipelineCheckValue);
+
     element
+      .on('input', inputCheckValue)
       .on('focus', function(ev) {
         containerCtrl.setFocused(true);
       })
       .on('blur', function(ev) {
         containerCtrl.setFocused(false);
+        inputCheckValue();
       });
 
     scope.$on('$destroy', function() {

diff --git a/src/components/input/input.spec.js b/src/components/input/input.spec.js
@@ -1,10 +1,12 @@
 describe('md-input-container directive', function() {
   beforeEach(module('material.components.input'));
 
-  function setup(attrs) {
+  function setup(attrs, isForm) {
     var container;
     inject(function($rootScope, $compile) {
-      container = $compile('<md-input-container><input ' +(attrs||'')+ '><label></label></md-input-container>')($rootScope);
+      container = $compile((isForm ? '<form>' : '') + 
+          '<md-input-container><input ' +(attrs||'')+ '><label></label></md-input-container>' +
+          (isForm ? '<form>' : ''))($rootScope);
       $rootScope.$apply();
     });
     return container;
@@ -56,7 +58,7 @@ describe('md-input-container directive', function() {
     expect(el.find('label').attr('for')).toBe(el.find('input').attr('id'));
   }));
 
-  ddescribe('md-maxlength', function() {
+  describe('md-maxlength', function() {
     function getCharCounter(el) {
       return angular.element(el[0].querySelector('.md-char-counter'));
     }

diff --git a/src/core/util/util.js b/src/core/util/util.js
@@ -33,11 +33,15 @@ angular.module('material.core')
 
     fakeNgModel: function() {
       return {
+        $fake: true,
         $setViewValue: function(value) {
           this.$viewValue = value;
           this.$render(value);
           this.$viewChangeListeners.forEach(function(cb) { cb(); });
         },
+        $isEmpty: function(value) {
+          return (''+value).length === 0;
+        },
         $parsers: [],
         $formatters: [],
         $viewChangeListeners: [],