feat(chips): md-max-chips to specify a maximum of chips that can be a…

…dded through user input

Current UX provides no indication of when max chips has been reached.

* use ngMessages to show information at max limit condition.

Fixes #6864. Closes #6897.

# Conflicts:
#	src/components/chips/chips.spec.js
#	src/components/chips/js/chipsController.js

src/components/chips/demoBasicUsage/index.html

@@ -3,12 +3,19 @@
   <md-content class="md-padding" layout="column">
     <h2 class="md-title">Use a custom chip template.</h2>
 
-    <md-chips ng-model="ctrl.roFruitNames" readonly="ctrl.readonly">
-      <md-chip-template>
-        <strong>{{$chip}}</strong>
-        <em>(fruit)</em>
-      </md-chip-template>
-    </md-chips>
+    <form name="fruitForm">
+      <md-chips ng-model="ctrl.roFruitNames" name="fruitName" readonly="ctrl.readonly" md-max-chips="5">
+        <md-chip-template>
+          <strong>{{$chip}}</strong>
+          <em>(fruit)</em>
+        </md-chip-template>
+      </md-chips>
+
+      <div class="errors" ng-messages="fruitForm.fruitName.$error">
+        <div ng-message="md-max-chips">The maxmium of chips is reached.</div>
+      </div>
+    </form>
+
 
     <br/>
     <h2 class="md-title">Use the default chip template.</h2>

src/components/chips/demoBasicUsage/script.js

@@ -1,7 +1,7 @@
 (function () {
   'use strict';
   angular
-      .module('chipsDemo', ['ngMaterial'])
+      .module('chipsDemo', ['ngMaterial', 'ngMessages'])
       .controller('BasicDemoCtrl', DemoCtrl);
 
   function DemoCtrl ($timeout, $q) {

src/components/chips/demoBasicUsage/style.scss

@@ -1,3 +1,9 @@
+.errors {
+  font-size: 12px;
+  color: rgb(221,44,0);
+  margin-top: 10px;
+}
+
 .custom-chips {
   .md-chip {
     position: relative;

src/components/chips/js/chipsDirective.js

@@ -67,6 +67,9 @@
    *    displayed when there is at least one item in the list
    * @param {boolean=} readonly Disables list manipulation (deleting or adding list items), hiding
    *    the input and delete buttons
+   * @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.
    * @param {expression} md-transform-chip An expression of form `myFunction($chip)` that when called
    *    expects one of the following return values:
    *    - an object representing the `$chip` input string
@@ -94,6 +97,23 @@
    *   </md-chips>
    * </hljs>
    *
+   * <h3>Validation</h3>
+   * When using [ngMessages](https://docs.angularjs.org/api/ngMessages), you can show errors based
+   * on our custom validators.
+   * <hljs lang="html">
+   *   <form name="userForm">
+   *     <md-chips
+   *       name="fruits"
+   *       ng-model="myItems"
+   *       placeholder="Add an item"
+   *       md-max-chips="5">
+   *     </md-chips>
+   *     <div ng-messages="userForm.fruits.$error" ng-if="userForm.$dirty">
+   *       <div ng-message="md-max-chips">You reached the maximum amount of chips</div>
+   *    </div>
+   *   </form>
+   * </hljs>
+   *
    */
 
 
@@ -177,6 +197,7 @@
         readonly: '=readonly',
         placeholder: '@',
         secondaryPlaceholder: '@',
+        maxChips: '@mdMaxChips',
         transformChip: '&mdTransformChip',
         onAppend: '&mdOnAppend',
         onAdd: '&mdOnAdd',