fix(forms): update components to new forms module (#745)

Author: kara

package.json

@@ -35,6 +35,7 @@
     "@angular/platform-browser": "2.0.0-rc.3",
     "@angular/platform-browser-dynamic": "2.0.0-rc.3",
     "@angular/router": "v3.0.0-alpha.8",
+    "@angular/forms": "^0.1.0",
     "core-js": "^2.4.0",
     "hammerjs": "^2.0.8",
     "rxjs": "5.0.0-beta.6",

src/components/button-toggle/button-toggle.spec.ts

@@ -8,8 +8,7 @@ import {
   fakeAsync,
   tick,
 } from '@angular/core/testing';
-// TODO(iveysaur): Update to @angular/forms when we have rc.2
-import {NgControl} from '@angular/common';
+import {NgControl, disableDeprecatedForms, provideForms} from '@angular/forms';
 import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing';
 import {Component, DebugElement, provide} from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -30,6 +29,8 @@ describe('MdButtonToggle', () => {
   let dispatcher: MdUniqueSelectionDispatcher;
 
   beforeEachProviders(() => [
+    disableDeprecatedForms(),
+    provideForms(),
     provide(MdUniqueSelectionDispatcher, {useFactory: () => {
       dispatcher = new MdUniqueSelectionDispatcher();
       return dispatcher;

src/components/button-toggle/button-toggle.ts

@@ -17,7 +17,7 @@ import {
 import {
     NG_VALUE_ACCESSOR,
     ControlValueAccessor,
-} from '@angular/common';
+} from '@angular/forms';
 import {Observable} from 'rxjs/Observable';
 import {
     MdUniqueSelectionDispatcher

src/components/checkbox/README.md

@@ -27,7 +27,7 @@ A demo of the checkbox can be found at https://plnkr.co/edit/P7qce8lN9n2flS6kBhD
 ### Usage within Forms
 
 In addition to supporting native checkbox functionality, `md-checkbox` also supports `[(ngModel)]`
-and `ngControl` for use within forms.
+for use within forms.
 
 ```html
 <form (submit)="saveUser()">

src/components/checkbox/checkbox.spec.ts

@@ -1,13 +1,20 @@
 import {
     it,
     beforeEach,
+    beforeEachProviders,
     inject,
     async,
     fakeAsync,
     flushMicrotasks,
     tick
 } from '@angular/core/testing';
-import {FORM_DIRECTIVES, NgModel, NgControl} from '@angular/common';
+import {
+    FORM_DIRECTIVES,
+    NgModel,
+    NgControl,
+    disableDeprecatedForms,
+    provideForms
+} from '@angular/forms';
 import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing';
 import {Component, DebugElement} from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -22,6 +29,11 @@ describe('MdCheckbox', () => {
   let builder: TestComponentBuilder;
   let fixture: ComponentFixture<any>;
 
+  beforeEachProviders(() => [
+    disableDeprecatedForms(),
+    provideForms(),
+  ]);
+
   beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
     builder = tcb;
   }));
@@ -432,7 +444,7 @@ describe('MdCheckbox', () => {
     });
   });
 
-  describe('with ngModel and ngControl', () => {
+  describe('with ngModel', () => {
     beforeEach(async(() => {
       builder.createAsync(CheckboxWithFormDirectives).then(f => {
         f.detectChanges();
@@ -501,12 +513,12 @@ class SingleCheckbox {
   onCheckboxClick(event: Event) {}
 }
 
-/** Simple component for testing an MdCheckbox with ngModel and ngControl. */
+/** Simple component for testing an MdCheckbox with ngModel. */
 @Component({
   directives: [MdCheckbox, FORM_DIRECTIVES, NgModel],
   template: `
     <form>
-      <md-checkbox ngControl="cb" [(ngModel)]="isGood">Be good</md-checkbox>
+      <md-checkbox name="cb" [(ngModel)]="isGood">Be good</md-checkbox>
     </form>
   `,
 })

src/components/checkbox/checkbox.ts

@@ -11,7 +11,7 @@ import {
     forwardRef,
     AfterContentInit
 } from '@angular/core';
-import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/common';
+import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
 
 /**
  * Monotonically increasing integer used to auto-generate unique ids for checkbox components.
@@ -20,7 +20,7 @@ let nextId = 0;
 
 /**
  * Provider Expression that allows md-checkbox to register as a ControlValueAccessor. This allows it
- * to support [(ngModel)] and ngControl.
+ * to support [(ngModel)].
  */
 export const MD_CHECKBOX_CONTROL_VALUE_ACCESSOR = new Provider(
     NG_VALUE_ACCESSOR, {

src/components/checkbox/package.json

@@ -21,6 +21,7 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "@angular2-material/core": "2.0.0-alpha.5-2"
+    "@angular2-material/core": "2.0.0-alpha.5-2",
+    "@angular/forms": "^0.1.0"
   }
 }

src/components/input/input.spec.ts

@@ -3,12 +3,14 @@ import {
   it,
   expect,
   beforeEach,
+  beforeEachProviders,
   fakeAsync,
   inject,
   tick,
 } from '@angular/core/testing';
 import {TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
+import {disableDeprecatedForms, provideForms} from '@angular/forms';
 import {By} from '@angular/platform-browser';
 import {
   MdInput,
@@ -19,6 +21,11 @@ import {
 describe('MdInput', function () {
   var builder: TestComponentBuilder;
 
+  beforeEachProviders(() => [
+    disableDeprecatedForms(),
+    provideForms(),
+  ]);
+
   beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
     builder = tcb;
   }));

src/components/input/input.ts

@@ -20,8 +20,8 @@ import {
   NG_VALUE_ACCESSOR,
   ControlValueAccessor,
   NgModel,
-  NgIf,
-} from '@angular/common';
+} from '@angular/forms';
+import {NgIf} from '@angular/common';
 import {BooleanFieldValue} from '@angular2-material/core/annotations/field-value';
 import {MdError} from '@angular2-material/core/errors/error';
 import {Observable} from 'rxjs/Observable';

src/components/input/package.json

@@ -23,6 +23,7 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "@angular2-material/core": "2.0.0-alpha.5-2"
+    "@angular2-material/core": "2.0.0-alpha.5-2",
+    "@angular/forms": "^0.1.0"
   }
 }