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"
   }
 }

src/components/radio/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/radio/radio.spec.ts

@@ -8,7 +8,7 @@ import {
   fakeAsync,
   tick
 } from '@angular/core/testing';
-import {FORM_DIRECTIVES, NgControl} from '@angular/common';
+import {FORM_DIRECTIVES, 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';
@@ -23,6 +23,8 @@ describe('MdRadio', () => {
   let dispatcher: MdUniqueSelectionDispatcher;
 
   beforeEachProviders(() => [
+    disableDeprecatedForms(),
+    provideForms(),
     provide(MdUniqueSelectionDispatcher, {useFactory: () => {
       dispatcher = new MdUniqueSelectionDispatcher();
       return dispatcher;
@@ -278,7 +280,7 @@ describe('MdRadio', () => {
       expect(groupInstance.selected.value).toBe(groupInstance.value);
     });
 
-    it('should have the correct ngControl state initially and after interaction', fakeAsync(() => {
+    it('should have the correct control state initially and after interaction', fakeAsync(() => {
       // The control should start off valid, pristine, and untouched.
       expect(groupNgControl.valid).toBe(true);
       expect(groupNgControl.pristine).toBe(true);

src/components/radio/radio.ts

@@ -17,7 +17,7 @@ import {
 import {
   NG_VALUE_ACCESSOR,
   ControlValueAccessor
-} from '@angular/common';
+} from '@angular/forms';
 import {
   MdUniqueSelectionDispatcher
 } from '@angular2-material/core/coordination/unique-selection-dispatcher';

src/components/slide-toggle/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"
   }
 }

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

@@ -3,18 +3,24 @@ import {
   describe,
   expect,
   beforeEach,
+  beforeEachProviders,
   inject,
   async
 } from '@angular/core/testing';
 import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing';
 import {By} from '@angular/platform-browser';
 import {Component} from '@angular/core';
 import {MdSlideToggle, MdSlideToggleChange} from './slide-toggle';
-import {NgControl} from '@angular/common';
+import {NgControl, disableDeprecatedForms, provideForms} from '@angular/forms';
 
 describe('MdSlideToggle', () => {
   let builder: TestComponentBuilder;
 
+  beforeEachProviders(() => [
+    disableDeprecatedForms(),
+    provideForms(),
+  ]);
+
   beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
     builder = tcb;
   }));
@@ -244,7 +250,7 @@ describe('MdSlideToggle', () => {
       fixture.detectChanges();
     });
 
-    it('should have the correct ngControl state initially and after interaction', () => {
+    it('should have the correct control state initially and after interaction', () => {
       // The control should start off valid, pristine, and untouched.
       expect(slideToggleControl.valid).toBe(true);
       expect(slideToggleControl.pristine).toBe(true);
@@ -269,7 +275,7 @@ describe('MdSlideToggle', () => {
       expect(slideToggleControl.touched).toBe(true);
     });
 
-    it('should not set the ngControl to touched when changing the state programmatically', () => {
+    it('should not set the control to touched when changing the state programmatically', () => {
       // The control should start off with being untouched.
       expect(slideToggleControl.touched).toBe(false);
 
@@ -288,7 +294,7 @@ describe('MdSlideToggle', () => {
       expect(slideToggleElement.classList).not.toContain('md-checked');
     });
 
-    it('should not set the ngControl to touched when changing the model', () => {
+    it('should not set the control to touched when changing the model', () => {
       // The control should start off with being untouched.
       expect(slideToggleControl.touched).toBe(false);
 

src/components/slide-toggle/slide-toggle.ts

@@ -12,7 +12,7 @@ import {
 import {
   ControlValueAccessor,
   NG_VALUE_ACCESSOR
-} from '@angular/common';
+} from '@angular/forms';
 import { BooleanFieldValue } from '@angular2-material/core/annotations/field-value';
 import { Observable } from 'rxjs/Observable';
 

src/demo-app/checkbox/checkbox-demo.html

@@ -1,7 +1,7 @@
 <h1>md-checkbox: Basic Example</h1>
 <form>
 <md-checkbox [(ngModel)]="isChecked"
-              ngControl="cb"
+              name="cb"
              (change)="isIndeterminate = false"
              [indeterminate]="isIndeterminate"
              [disabled]="isDisabled"

src/demo-app/checkbox/checkbox-demo.ts

@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
-import {NgFor, FORM_DIRECTIVES} from '@angular/common';
+import {NgFor} from '@angular/common';
+import {FORM_DIRECTIVES} from '@angular/forms';
 import {MdCheckbox} from '@angular2-material/checkbox/checkbox';
 
 export interface Task {

src/demo-app/grid-list/grid-list-demo.ts

@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
-import {NgFor, FORM_DIRECTIVES} from '@angular/common';
+import {NgFor} from '@angular/common';
+import {FORM_DIRECTIVES} from '@angular/forms';
 import {MD_GRID_LIST_DIRECTIVES} from '@angular2-material/grid-list/grid-list';
 import {MdButton} from '@angular2-material/button/button';
 import {MD_CARD_DIRECTIVES} from '@angular2-material/card/card';

src/demo-app/input/input-demo.ts

@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
-import {FORM_DIRECTIVES, NgFor} from '@angular/common';
+import {NgFor} from '@angular/common';
+import {FORM_DIRECTIVES} from '@angular/forms';
 import {MD_INPUT_DIRECTIVES} from '@angular2-material/input/input';
 import {MdButton} from '@angular2-material/button/button';
 import {MdCard} from '@angular2-material/card/card';

src/demo-app/main.ts

@@ -3,6 +3,7 @@ import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
 import {HTTP_PROVIDERS} from '@angular/http';
 import {provide} from '@angular/core';
 import {Renderer} from '@angular/core';
+import {disableDeprecatedForms, provideForms} from '@angular/forms';
 
 import {OVERLAY_CONTAINER_TOKEN} from '@angular2-material/core/overlay/overlay';
 import {MdLiveAnnouncer} from '@angular2-material/core/a11y/live-announcer';
@@ -15,10 +16,12 @@ import {DEMO_APP_ROUTE_PROVIDER} from './demo-app/routes';
 
 bootstrap(DemoApp, [
   DEMO_APP_ROUTE_PROVIDER,
+  disableDeprecatedForms(),
+  provideForms(),
   MdLiveAnnouncer,
   provide(OVERLAY_CONTAINER_TOKEN, {useValue: createOverlayContainer()}),
   HTTP_PROVIDERS,
   MdIconRegistry,
   Renderer,
-  provide(HAMMER_GESTURE_CONFIG, {useClass: MdGestureConfig})
+  provide(HAMMER_GESTURE_CONFIG, {useClass: MdGestureConfig}),
 ]);

src/demo-app/radio/radio-demo.ts

@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
-import {FORM_DIRECTIVES, NgFor} from '@angular/common';
+import {NgFor} from '@angular/common';
+import {FORM_DIRECTIVES} from '@angular/forms';
 import {MdCheckbox} from '@angular2-material/checkbox/checkbox';
 import {MD_RADIO_DIRECTIVES} from '@angular2-material/radio/radio';
 import {

src/demo-app/slide-toggle/slide-toggle-demo.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {FORM_DIRECTIVES} from '@angular/common';
+import {FORM_DIRECTIVES} from '@angular/forms';
 import {MdSlideToggle} from '@angular2-material/slide-toggle/slide-toggle';
 
 @Component({

src/demo-app/system-config.ts

@@ -55,6 +55,7 @@ const barrels: string[] = [
   '@angular/common',
   '@angular/compiler',
   '@angular/http',
+  '@angular/forms',
   '@angular/router',
   '@angular/platform-browser',
   '@angular/platform-browser-dynamic',

src/demo-app/tabs/tab-group-demo.ts

@@ -1,5 +1,6 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-import {FORM_DIRECTIVES, NgIf, NgFor, AsyncPipe} from '@angular/common';
+import {NgIf, NgFor, AsyncPipe} from '@angular/common';
+import {FORM_DIRECTIVES} from '@angular/forms';
 import {MD_TABS_DIRECTIVES} from '@angular2-material/tabs/tabs';
 import {MdToolbar} from '@angular2-material/toolbar/toolbar';
 import {MdInput} from '@angular2-material/input/input';