feat(md-chips): added validation for ng-required (#11125)

Fixes #11124

Author: Florian Scholz

src/components/chips/chips.spec.js

@@ -1044,6 +1044,59 @@ describe('<md-chips>', function() {
 
       });
 
+      describe('ng-required', function() {
+        beforeEach(function() {
+            // Clear default items to test the required chips functionality
+            scope.items = [];
+        });
+
+        it('should set the required error when chips is compiled with an empty array', function() {
+          var template =
+              '<form name="form">' +
+              '<md-chips name="chips" ng-required="true" ng-model="items"></md-chips>' +
+              '</form>';
+
+          var element = buildChips(template);
+          element.scope().$apply();
+
+          expect(scope.form.chips.$error['required']).toBe(true);
+        });
+
+        it('should unset the required error when the first chip is added', function() {
+          var template =
+              '<form name="form">' +
+              '<md-chips name="chips" ng-required="true" ng-model="items"></md-chips>' +
+              '</form>';
+
+          var element = buildChips(template);
+          var ctrl = element.find('md-chips').controller('mdChips');
+
+          element.scope().$apply(function() {
+            ctrl.chipBuffer = 'Test';
+            simulateInputEnterKey(ctrl);
+          });
+
+          expect(scope.form.chips.$error['required']).toBeUndefined();
+        });
+
+        it('should set the required when the last chip is removed', function() {
+          scope.items = ['test'];
+          var template =
+              '<form name="form">' +
+              '<md-chips name="chips" required ng-model="items"></md-chips>' +
+              '</form>';
+
+          var element = buildChips(template);
+          var ctrl = element.find('md-chips').controller('mdChips');
+
+          element.scope().$apply(function() {
+            ctrl.removeChip(0);
+          });
+
+          expect(scope.form.chips.$error['required']).toBe(true);
+        });
+      });
+
       describe('focus functionality', function() {
         var element, ctrl;
 

src/components/chips/demoValidation/index.html

@@ -0,0 +1,38 @@
+<div ng-controller="ChipsValidationCtrl as ctrl" layout="column" ng-cloak>
+  <md-content class="md-padding" layout="column">
+
+    <h2 class="md-title">Required</h2>
+    <form name="fruitForm">
+      <md-chips name="fruits"
+                ng-model="ctrl.selectedFruit"
+                ng-required="true"
+                placeholder="Add a fruit">
+      </md-chips>
+      <div class="md-chips-messages"
+           ng-show="fruitForm.fruits.$dirty || fruitForm.$submitted"
+           ng-messages="fruitForm.fruits.$error">
+        <div ng-message="required">At least one fruit is required</div>
+      </div>
+    </form>
+
+
+    <h2 class="md-title">Max Chips</h2>
+    <form name="vegetableForm">
+      <md-chips name="vegetables"
+                ng-model="ctrl.selectedVegetables"
+                placeholder="Add a vegetable"
+                md-max-chips="5">
+      </md-chips>
+      <div class="md-chips-messages"
+           ng-show="vegetableForm.vegetables.$dirty || vegetableForm.$submitted"
+           ng-messages="vegetableForm.vegetables.$error">
+        <div ng-message="md-max-chips">You reached the maximum number of vegetables</div>
+      </div>
+    </form>
+
+    <p class="note">
+      Be aware that error messages for chips are not styled by default since they are not part of <code>md-input-container</code>.
+    </p>
+
+  </md-content>
+</div>

src/components/chips/demoValidation/script.js

@@ -0,0 +1,11 @@
+(function () {
+  'use strict';
+  angular
+    .module('chipsValidationDemo', ['ngMaterial', 'ngMessages'])
+    .controller('ChipsValidationCtrl', ValidationCtrl);
+
+  function ValidationCtrl () {
+    this.selectedFruit = [];
+    this.selectedVegetables = [];
+  }
+})();

src/components/chips/demoValidation/style.css

@@ -0,0 +1,18 @@
+.md-chips-messages {
+  color: rgb(221,44,0);
+  position: relative;
+  order: 4;
+  overflow: hidden;
+}
+
+.md-chips-messages [ng-message] {
+  font-size: 12px;
+  line-height: 14px;
+  overflow: hidden;
+  margin-top: 0;
+  padding-top: 5px;
+}
+
+p.note {
+  font-size: 12px;
+}

src/components/chips/js/chipsController.js

@@ -160,6 +160,13 @@ function MdChipsCtrl ($scope, $attrs, $mdConstant, $log, $element, $timeout, $md
    */
   this.chipAppendDelay = DEFAULT_CHIP_APPEND_DELAY;
 
+  /**
+   * Collection of functions to call to un-register watchers
+   *
+   * @type {Array}
+   */
+  this.deRegister = [];
+
   this.init();
 }
 
@@ -170,18 +177,32 @@ MdChipsCtrl.prototype.init = function() {
   var ctrl = this;
 
   // Set the wrapper ID
-  ctrl.wrapperId = '_md-chips-wrapper-' + ctrl.$mdUtil.nextUid();
+  this.wrapperId = '_md-chips-wrapper-' + this.$mdUtil.nextUid();
 
   // Setup a watcher which manages the role and aria-owns attributes
-  ctrl.$scope.$watchCollection('$mdChipsCtrl.items', function() {
-    // Make sure our input and wrapper have the correct ARIA attributes
-    ctrl.setupInputAria();
-    ctrl.setupWrapperAria();
-  });
+  this.deRegister.push(
+    this.$scope.$watchCollection('$mdChipsCtrl.items', function() {
+      // Make sure our input and wrapper have the correct ARIA attributes
+      ctrl.setupInputAria();
+      ctrl.setupWrapperAria();
+    })
+  );
 
-  ctrl.$attrs.$observe('mdChipAppendDelay', function(newValue) {
-    ctrl.chipAppendDelay = parseInt(newValue) || DEFAULT_CHIP_APPEND_DELAY;
-  });
+  this.deRegister.push(
+    this.$attrs.$observe('mdChipAppendDelay', function(newValue) {
+      ctrl.chipAppendDelay = parseInt(newValue) || DEFAULT_CHIP_APPEND_DELAY;
+    })
+  );
+};
+
+/**
+ * Destructor for cleanup
+ */
+MdChipsCtrl.prototype.$onDestroy = function $onDestroy() {
+  var $destroyFn;
+  while (($destroyFn = this.deRegister.pop())) {
+    $destroyFn.call(this);
+  }
 };
 
 /**
@@ -560,6 +581,7 @@ MdChipsCtrl.prototype.hasMaxChipsReached = function() {
  */
 MdChipsCtrl.prototype.validateModel = function() {
   this.ngModelCtrl.$setValidity('md-max-chips', !this.hasMaxChipsReached());
+  this.ngModelCtrl.$validate(); // rerun any registered validators
 };
 
 /**
@@ -685,6 +707,12 @@ MdChipsCtrl.prototype.configureNgModel = function(ngModelCtrl) {
   this.ngModelCtrl = ngModelCtrl;
 
   var self = this;
+
+  // in chips the meaning of $isEmpty changes
+  ngModelCtrl.$isEmpty = function(value) {
+    return !value || value.length === 0;
+  };
+
   ngModelCtrl.$render = function() {
     // model is updated. do something.
     self.items = self.ngModelCtrl.$viewValue;
@@ -716,6 +744,43 @@ MdChipsCtrl.prototype.onInputBlur = function () {
   }
 };
 
+/**
+ * Configure event bindings on input element.
+ * @param inputElement
+ */
+MdChipsCtrl.prototype.configureInput = function configureInput(inputElement) {
+  // Find the NgModelCtrl for the input element
+  var ngModelCtrl = inputElement.controller('ngModel');
+  var ctrl = this;
+
+  if (ngModelCtrl) {
+
+    // sync touched-state from inner input to chips-element
+    this.deRegister.push(
+      this.$scope.$watch(
+        function() {
+          return ngModelCtrl.$touched;
+        },
+        function(isTouched) {
+          isTouched && ctrl.ngModelCtrl.$setTouched();
+        }
+      )
+    );
+
+    // sync dirty-state from inner input to chips-element
+    this.deRegister.push(
+      this.$scope.$watch(
+        function() {
+          return ngModelCtrl.$dirty;
+        },
+        function(isDirty) {
+          isDirty && ctrl.ngModelCtrl.$setDirty();
+        }
+      )
+    );
+  }
+};
+
 /**
  * Configure event bindings on a user-provided input element.
  * @param inputElement
@@ -743,7 +808,7 @@ MdChipsCtrl.prototype.configureUserInput = function(inputElement) {
       .attr({ tabindex: 0 })
       .on('keydown', function(event) { scopeApplyFn(event, ctrl.inputKeydown) })
       .on('focus', function(event) { scopeApplyFn(event, ctrl.onInputFocus) })
-      .on('blur', function(event) { scopeApplyFn(event, ctrl.onInputBlur) })
+      .on('blur', function(event) { scopeApplyFn(event, ctrl.onInputBlur) });
 };
 
 MdChipsCtrl.prototype.configureAutocomplete = function(ctrl) {

src/components/chips/js/chipsDirective.js

@@ -109,6 +109,7 @@
    * @param {string=} md-enable-chip-edit Set this to "true" to enable editing of chip contents. The user can 
    *    go into edit mode with pressing "space", "enter", or double clicking on the chip. Chip edit is only
    *    supported for chips with basic template.
+   * @param {boolean=} ng-required Whether ng-model is allowed to be empty or not.
    * @param {number=} md-max-chips The maximum number of chips allowed to add through user input.
    *    <br/><br/>The validation property `md-max-chips` can be used when the max chips
    *    amount is reached.
@@ -421,7 +422,10 @@
           $mdUtil.nextTick(function() {
             var input = element.find('input');
 
-            input && input.toggleClass('md-input', true);
+            if (input) {
+              mdChipsCtrl.configureInput(input);
+              input.toggleClass('md-input', true);
+            }
           });
         }