feat(mdInputContainer): add mdIsError expr, defaults to $touched && $…

…invalid Closes #1267. Addresses #1178.
angular · Jan 27, 2015 · c3cad66 · c3cad66
1 parent b1563a2
commit c3cad66
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 6 deletions.
diff --git a/src/components/input/input.js b/src/components/input/input.js
@@ -28,6 +28,8 @@ angular.module('material.components.input', [
  * Input and textarea elements will not behave properly unless the md-input-container 
  * parent is provided.
  *
+ * @param md-is-error {expression=} When the given expression evaluates to true, the input container will go into error state. Defaults to erroring if the input has been touched and is invalid.
+ *
  * @usage
  * <hljs lang="html">
  *
@@ -43,7 +45,7 @@ angular.module('material.components.input', [
  *
  * </hljs>
  */
-function mdInputContainerDirective($mdTheming) {
+function mdInputContainerDirective($mdTheming, $parse) {
   return {
     restrict: 'E',
     link: postLink,
@@ -53,9 +55,11 @@ function mdInputContainerDirective($mdTheming) {
   function postLink(scope, element, attr) {
     $mdTheming(element);
   }
-  function ContainerCtrl($scope, $element, $mdUtil) {
+  function ContainerCtrl($scope, $element, $attrs) {
     var self = this;
 
+    self.isErrorGetter = $attrs.mdIsError && $parse($attrs.mdIsError);
+
     self.element = $element;
     self.setFocused = function(isFocused) {
       $element.toggleClass('md-input-focused', !!isFocused);
@@ -66,7 +70,6 @@ function mdInputContainerDirective($mdTheming) {
     self.setInvalid = function(isInvalid) {
       $element.toggleClass('md-input-invalid', !!isInvalid);
     };
-
     $scope.$watch(function() {
       return self.label && self.input;
     }, function(hasLabelAndInput) {
@@ -199,9 +202,11 @@ function inputTextareaDirective($mdUtil, $window, $compile, $animate) {
       containerCtrl.setHasValue(element.val().length > 0 || (element[0].validity||{}).badInput);
     }
 
-    scope.$watch(function() {
-      return ngModelCtrl.$dirty && ngModelCtrl.$invalid;
-    }, containerCtrl.setInvalid);
+
+    var isErrorGetter = containerCtrl.isErrorGetter || function() {
+      return ngModelCtrl.$invalid && ngModelCtrl.$touched;
+    };
+    scope.$watch(isErrorGetter, containerCtrl.setInvalid);
 
     ngModelCtrl.$parsers.push(ngModelPipelineCheckValue);
     ngModelCtrl.$formatters.push(ngModelPipelineCheckValue);

diff --git a/src/components/input/input.spec.js b/src/components/input/input.spec.js
@@ -12,6 +12,35 @@ describe('md-input-container directive', function() {
     return container;
   }
 
+  it('should by default show error on $touched and $invalid', inject(function($rootScope) {
+    var el = setup('ng-model="foo"');
+
+    expect(el).not.toHaveClass('md-input-invalid');
+
+    var model = el.find('input').controller('ngModel');
+    model.$touched = model.$invalid = true;
+    $rootScope.$apply();
+
+    expect(el).toHaveClass('md-input-invalid');
+
+    model.$touched = model.$invalid = false;
+    $rootScope.$apply();
+    expect(el).not.toHaveClass('md-input-invalid');
+  }));
+
+  it('should show error with given md-is-error expression', inject(function($rootScope, $compile) {
+    var el = $compile('<md-input-container md-is-error="$root.isError"><input ng-model="foo"></md-input-container>')($rootScope);
+
+    $rootScope.$apply();
+    expect(el).not.toHaveClass('md-input-invalid');
+
+    $rootScope.$apply('isError = true');
+    expect(el).toHaveClass('md-input-invalid');
+
+    $rootScope.$apply('isError = false');
+    expect(el).not.toHaveClass('md-input-invalid');
+  }));
+
   it('should set focus class on container', function() {
     var el = setup();
     expect(el).not.toHaveClass('md-input-focused');