feat(checkbox/switch): add support for animating ng-messages (#9473)

Add support for animating ng-messages on md-checkbox and ng-switch, in line with input, md-select and md-datepicker. Fixes #9430.

Author: Frank3K

src/components/checkbox/checkbox.js

@@ -60,7 +60,7 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
   return {
     restrict: 'E',
     transclude: true,
-    require: '?ngModel',
+    require: ['^?mdInputContainer', '?ngModel', '?^form'],
     priority: $mdConstant.BEFORE_NG_ARIA,
     template:
       '<div class="md-container" md-ink-ripple md-ink-ripple-checkbox>' +
@@ -92,9 +92,22 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
       post: postLink
     };
 
-    function postLink(scope, element, attr, ngModelCtrl) {
+    function postLink(scope, element, attr, ctrls) {
       var isIndeterminate;
-      ngModelCtrl = ngModelCtrl || $mdUtil.fakeNgModel();
+      var containerCtrl = ctrls[0];
+      var ngModelCtrl = ctrls[1] || $mdUtil.fakeNgModel();
+      var formCtrl = ctrls[2];
+
+      if (containerCtrl) {
+        var isErrorGetter = containerCtrl.isErrorGetter || function() {
+          return ngModelCtrl.$invalid && (ngModelCtrl.$touched || (formCtrl && formCtrl.$submitted));
+        };
+
+        containerCtrl.input = element;
+
+        scope.$watch(isErrorGetter, containerCtrl.setInvalid);
+      }
+
       $mdTheming(element);
 
       // Redirect focus events to the root element, because IE11 is always focusing the container element instead

src/components/input/demoErrors/index.html

@@ -69,6 +69,27 @@
         </div>
       </md-input-container>
 
+      <md-input-container class="md-block">
+        <md-checkbox name="tos" ng-model="project.tos" required>
+          I accept the terms of service.
+        </md-checkbox>
+        <div ng-messages="projectForm.tos.$error" multiple md-auto-hide="false">
+          <div ng-message="required">
+            You must accept the terms of service before you can proceed.
+          </div>
+        </div>
+      </md-input-container>
+
+      <md-input-container class="md-block">
+        <md-switch class="md-primary" name="special" ng-model="project.special" required>
+          Enable special options.
+        </md-switch>
+        <div ng-messages="projectForm.special.$error" multiple>
+          <div ng-message="required">
+            You must enable all special options before you can proceed.
+          </div>
+        </div>
+      </md-input-container>
       <div>
         <md-button type="submit">Submit</md-button>
       </div>

src/components/input/demoErrors/script.js

@@ -3,6 +3,7 @@ angular.module('inputErrorsApp', ['ngMaterial', 'ngMessages'])
 .controller('AppCtrl', function($scope) {
   $scope.project = {
     description: 'Nuclear Missile Defense System',
-    rate: 500
+    rate: 500,
+    special: true
   };
 });

src/components/input/input-animations.spec.js

@@ -4,7 +4,7 @@ describe('md-input-container animations', function() {
     cssTransitionsDisabled = false, lastAnimateCall;
 
   // Load our modules
-  beforeEach(module('ngAnimate', 'ngMessages', 'material.components.input'));
+  beforeEach(module('ngAnimate', 'ngMessages', 'material.components.input', 'material.components.checkbox'));
 
   // Run pre-test setup
   beforeEach(decorateAnimateCss);
@@ -14,7 +14,7 @@ describe('md-input-container animations', function() {
   // Run after-test teardown
   afterEach(teardown);
 
-  it('set the proper styles when showing messages', function() {
+  it('set the proper styles when showing messages on an input', function() {
     compile(
       '<form name="testForm">' +
       '  <md-input-container>' +
@@ -185,6 +185,75 @@ describe('md-input-container animations', function() {
     });
   });
 
+  it('set the proper styles when showing messages on an md-checkbox', function() {
+    compile(
+      '<form name="testForm">' +
+      '  <md-input-container>' +
+      '    <md-checkbox name="cb" ng-model="foo" required>Test</md-checkbox>' +
+      '    <div class="errors" ng-messages="testForm.cb.$error">' +
+      '      <div ng-message="required">required</div>' +
+      '    </div>' +
+      '  </md-input-container>' +
+      '</form>'
+    );
+
+    var container = el.find('md-input-container'),
+      checkbox = el.find('md-checkbox'),
+      doneSpy = jasmine.createSpy('done');
+
+    // Mimic the real validations/animations that fire
+
+    /*
+     * 1. Uncheck the checkbox but don't blur (so it's not invalid yet)
+     *
+     * Expect nothing to happen ($animateCss called with no options)
+     */
+
+    setFoo(true);
+    checkbox.triggerHandler('click');
+    messageAnimation.enter(getError(), doneSpy);
+    flush();
+
+    expectError(getError(), 'required');
+    expect(doneSpy).toHaveBeenCalled();
+    expect(container).not.toHaveClass('md-input-invalid');
+    expect(lastAnimateCall).toEqual({element: getError(), options: {}});
+
+    /*
+     * 2. Blur the checkbox, which adds the md-input-invalid class
+     *
+     * Expect to animate in the required message
+     */
+
+    doneSpy.calls.reset();
+    checkbox.triggerHandler('blur');
+    invalidAnimation.addClass(container, 'md-input-invalid', doneSpy);
+    flush();
+
+    expectError(getError(), 'required');
+    expect(doneSpy).toHaveBeenCalled();
+    expect(container).toHaveClass('md-input-invalid');
+    expect(lastAnimateCall.element).toEqual(getError());
+    expect(lastAnimateCall.options.event).toEqual('enter');
+    expect(lastAnimateCall.options.to).toEqual({"opacity": 1, "margin-top": "0"});
+
+    /*
+     * 3. Clear the field
+     *
+     * Expect to animate away required message
+     */
+
+    doneSpy.calls.reset();
+    messageAnimation.leave(getError(), doneSpy);
+    flush();
+
+    expect(doneSpy).toHaveBeenCalled();
+    expect(lastAnimateCall.element).toEqual(getError());
+    expect(lastAnimateCall.options.event).toEqual('leave');
+    expect(parseInt(lastAnimateCall.options.to["margin-top"])).toBeLessThan(0);
+
+  });
+
   /*
    * Test Helper Functions
    */

src/components/switch/switch.js

@@ -62,7 +62,7 @@ function MdSwitch(mdCheckboxDirective, $mdUtil, $mdConstant, $parse, $$rAF, $mdG
         '</div>'+
       '</div>' +
       '<div ng-transclude class="md-label"></div>',
-    require: '?ngModel',
+    require: ['^?mdInputContainer', '?ngModel', '?^form'],
     compile: mdSwitchCompile
   };
 
@@ -71,8 +71,10 @@ function MdSwitch(mdCheckboxDirective, $mdUtil, $mdConstant, $parse, $$rAF, $mdG
     // No transition on initial load.
     element.addClass('md-dragging');
 
-    return function (scope, element, attr, ngModel) {
-      ngModel = ngModel || $mdUtil.fakeNgModel();
+    return function (scope, element, attr, ctrls) {
+      var containerCtrl = ctrls[0];
+      var ngModel = ctrls[1] || $mdUtil.fakeNgModel();
+      var formCtrl = ctrls[2];
 
       var disabledGetter = null;
       if (attr.disabled != null) {
@@ -90,7 +92,7 @@ function MdSwitch(mdCheckboxDirective, $mdUtil, $mdConstant, $parse, $$rAF, $mdG
         element.removeClass('md-dragging');
       });
 
-      checkboxLink(scope, element, attr, ngModel);
+      checkboxLink(scope, element, attr, ctrls);
 
       if (disabledGetter) {
         scope.$watch(disabledGetter, function(isDisabled) {