feat(chip-list): Implement FormFieldControl

Author: tinayuangao

src/demo-app/chips/chips-demo.html

@@ -46,19 +46,19 @@ <h4>Form Field</h4>
       </p>
 
 
-      <md-form-field>
-        <md-chip-list mdPrefix #chipList1>
+      <md-form-field class="has-chip-list">
+        <md-chip-list #chipList1 [(ngModel)]="selectedPeople" required>
           <md-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
                    [removable]="removable" (remove)="remove(person)">
             {{person.name}}
             <md-icon mdChipRemove *ngIf="removable">cancel</md-icon>
           </md-chip>
+          <input placeholder="New Contributor..."
+                 [mdChipInputFor]="chipList1"
+                 [mdChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                 [mdChipInputAddOnBlur]="false"
+                 (mdChipInputTokenEnd)="add($event)" />
         </md-chip-list>
-        <input mdInput placeholder="New Contributor..."
-               [mdChipInputFor]="chipList1"
-               [mdChipInputSeparatorKeyCodes]="separatorKeysCodes"
-               [mdChipInputAddOnBlur]="addOnBlur"
-               (mdChipInputTokenEnd)="add($event)" />
       </md-form-field>
 
 
@@ -68,21 +68,37 @@ <h4>Form Field</h4>
         With <code>mdChipInput</code> the input work with chip-list
       </p>
 
-      <md-chip-list #chipList2>
-        <md-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
-                 [removable]="removable" (remove)="remove(person)">
-          {{person.name}}
-          <md-icon mdChipRemove *ngIf="removable">cancel</md-icon>
-        </md-chip>
-      </md-chip-list>
       <md-form-field>
-        <input mdInput placeholder="New Contributor..."
+        <md-chip-list #chipList2>
+          <md-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
+                   [removable]="removable" (remove)="remove(person)">
+            {{person.name}}
+            <md-icon mdChipRemove *ngIf="removable">cancel</md-icon>
+          </md-chip>
+        </md-chip-list>
+        <input placeholder="New Contributor..."
                [mdChipInputFor]="chipList2"
                [mdChipInputSeparatorKeyCodes]="separatorKeysCodes"
                [mdChipInputAddOnBlur]="addOnBlur"
                (mdChipInputTokenEnd)="add($event)" />
       </md-form-field>
 
+      <p>
+        Chips list without input
+      </p>
+
+
+      <md-form-field class="has-chip-list">
+        <md-chip-list #chipList3>
+          <md-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
+                   [removable]="removable" (remove)="remove(person)">
+            {{person.name}}
+            <md-icon mdChipRemove *ngIf="removable">cancel</md-icon>
+          </md-chip>
+        </md-chip-list>
+      </md-form-field>
+
+
       <p>
         The example above has overridden the <code>[separatorKeys]</code> input to allow for
         <code>ENTER</code>, <code>COMMA</code> and <code>SEMI COLON</code> keys.
@@ -108,6 +124,17 @@ <h4>Stacked Chips</h4>
           {{aColor.name}}
         </md-chip>
       </md-chip-list>
+
+      <h4>NgModel with chip list</h4>
+      <md-chip-list [(ngModel)]="selectedColors">
+        <md-chip *ngFor="let aColor of availableColors" color="{{aColor.color}}"
+                 [value]="aColor.name" (remove)="removeColor(aColor)">
+          {{aColor.name}}
+          <md-icon mdChipRemove>cancel</md-icon>
+        </md-chip>
+      </md-chip-list>
+
+      The selected colors are <span *ngFor="let color of selectedColors"> {{color}}</span>.
     </md-card-content>
   </md-card>
 </div>

src/demo-app/chips/chips-demo.scss

@@ -25,3 +25,7 @@
     width: 150px;
   }
 }
+
+.has-chip-list {
+  width: 100%;
+}

src/demo-app/chips/chips-demo.ts

@@ -29,6 +29,8 @@ export class ChipsDemo {
   // Enter, comma, semi-colon
   separatorKeysCodes = [ENTER, COMMA, 186];
 
+  selectedPeople = null;
+
   people: Person[] = [
     { name: 'Kara' },
     { name: 'Jeremy' },
@@ -72,7 +74,22 @@ export class ChipsDemo {
     }
   }
 
+  removeColor(color: DemoColor) {
+    let index = this.availableColors.indexOf(color);
+
+    if (index >= 0) {
+      this.availableColors.splice(index, 1);
+    }
+
+    index = this.selectedColors.indexOf(color.name);
+
+    if (index >= 0) {
+      this.selectedColors.splice(index, 1);
+    }
+  }
+
   toggleVisible(): void {
     this.visible = false;
   }
+  selectedColors: any[] = ["Primary", "Warn"];
 }

src/lib/chips/chip-input.spec.ts

@@ -1,6 +1,7 @@
 import {async, TestBed, ComponentFixture} from '@angular/core/testing';
 import {MdChipsModule} from './index';
 import {Component, DebugElement} from '@angular/core';
+import {PlatformModule} from '../core/platform/index';
 import {MdChipInput, MdChipInputEvent} from './chip-input';
 import {By} from '@angular/platform-browser';
 import {Directionality} from '../core';
@@ -21,7 +22,7 @@ describe('MdChipInput', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MdChipsModule],
+      imports: [MdChipsModule, PlatformModule],
       declarations: [TestChipInput],
       providers: [{
         provide: Directionality, useFactory: () => {

src/lib/chips/chip-input.ts

@@ -6,10 +6,29 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, Output, EventEmitter, ElementRef, Input} from '@angular/core';
+import {
+  Directive,
+  ElementRef,
+  Output,
+  EventEmitter,
+  Inject,
+  Input,
+  Optional,
+  Renderer2,
+  Self,
+} from '@angular/core';
+import {FormControl, FormGroupDirective, NgControl, NgForm} from '@angular/forms';
+import {Platform, getSupportedInputTypes} from '@angular/cdk/platform';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {ENTER} from '../core/keyboard/keycodes';
 import {MdChipList} from './chip-list';
+import {MdInput} from '../input/input';
+import {
+  defaultErrorStateMatcher,
+  ErrorOptions,
+  ErrorStateMatcher,
+  MD_ERROR_GLOBAL_OPTIONS
+} from '../core/error/error-options';
 
 export interface MdChipInputEvent {
   input: HTMLInputElement;
@@ -19,12 +38,13 @@ export interface MdChipInputEvent {
 @Directive({
   selector: 'input[mdChipInputFor], input[matChipInputFor]',
   host: {
-    'class': 'mat-chip-input',
+    'class': 'mat-chip-input mat-input-element',
     '(keydown)': '_keydown($event)',
-    '(blur)': '_blur()'
+    '(blur)': '_blur()',
+    '(focus)': '_focus()',
   }
 })
-export class MdChipInput {
+export class MdChipInput extends MdInput {
 
   _chipList: MdChipList;
 
@@ -33,7 +53,7 @@ export class MdChipInput {
   set chipList(value: MdChipList) {
     if (value) {
       this._chipList = value;
-      this._chipList.registerInput(this._inputElement);
+      this._chipList.registerInput(this);
     }
   }
 
@@ -71,7 +91,14 @@ export class MdChipInput {
   /** The native input element to which this directive is attached. */
   protected _inputElement: HTMLInputElement;
 
-  constructor(protected _elementRef: ElementRef) {
+  constructor(protected _elementRef: ElementRef,
+              protected _renderer: Renderer2,
+              protected _platform: Platform,
+              @Optional() @Self() public ngControl: NgControl,
+              @Optional() protected _parentForm: NgForm,
+              @Optional() protected _parentFormGroup: FormGroupDirective,
+              @Optional() @Inject(MD_ERROR_GLOBAL_OPTIONS) errorOptions: ErrorOptions) {
+    super(_elementRef, _renderer, _platform, ngControl, _parentForm, _parentFormGroup, errorOptions);
     this._inputElement = this._elementRef.nativeElement as HTMLInputElement;
   }
 
@@ -85,6 +112,13 @@ export class MdChipInput {
     if (this.addOnBlur) {
       this._emitChipEnd();
     }
+    super._focusChanged(false);
+    this._chipList.stateChanges.next();
+  }
+
+  _focus() {
+    super._focusChanged(true);
+    this._chipList.stateChanges.next();
   }
 
   /** Checks to see if the (chipEnd) event needs to be emitted. */