From 653fcee4b9c56280b4b06ca600eb41cfa0118b1a Mon Sep 17 00:00:00 2001 From: Kara Date: Thu, 30 Jun 2016 07:29:31 -0700 Subject: [PATCH] fix(forms): update components to new forms module (#745) --- package.json | 1 + .../button-toggle/button-toggle.spec.ts | 5 +++-- src/components/button-toggle/button-toggle.ts | 2 +- src/components/checkbox/README.md | 2 +- src/components/checkbox/checkbox.spec.ts | 20 +++++++++++++++---- src/components/checkbox/checkbox.ts | 4 ++-- src/components/checkbox/package.json | 3 ++- src/components/input/input.spec.ts | 7 +++++++ src/components/input/input.ts | 4 ++-- src/components/input/package.json | 3 ++- src/components/radio/package.json | 3 ++- src/components/radio/radio.spec.ts | 6 ++++-- src/components/radio/radio.ts | 2 +- src/components/slide-toggle/package.json | 3 ++- .../slide-toggle/slide-toggle.spec.ts | 14 +++++++++---- src/components/slide-toggle/slide-toggle.ts | 2 +- src/demo-app/checkbox/checkbox-demo.html | 2 +- src/demo-app/checkbox/checkbox-demo.ts | 3 ++- src/demo-app/grid-list/grid-list-demo.ts | 3 ++- src/demo-app/input/input-demo.ts | 3 ++- src/demo-app/main.ts | 5 ++++- src/demo-app/radio/radio-demo.ts | 3 ++- .../slide-toggle/slide-toggle-demo.ts | 2 +- src/demo-app/system-config.ts | 1 + src/demo-app/tabs/tab-group-demo.ts | 3 ++- src/e2e-app/main.ts | 5 ++++- src/e2e-app/system-config.ts | 1 + 27 files changed, 79 insertions(+), 33 deletions(-) diff --git a/package.json b/package.json index 2356a523aed2..8b83ecb916c6 100644 --- a/package.json +++ b/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", diff --git a/src/components/button-toggle/button-toggle.spec.ts b/src/components/button-toggle/button-toggle.spec.ts index b027d65f7945..f6fef696b3d7 100644 --- a/src/components/button-toggle/button-toggle.spec.ts +++ b/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; diff --git a/src/components/button-toggle/button-toggle.ts b/src/components/button-toggle/button-toggle.ts index 543ea3367b43..2aa3734d4065 100644 --- a/src/components/button-toggle/button-toggle.ts +++ b/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 diff --git a/src/components/checkbox/README.md b/src/components/checkbox/README.md index e7cfc28a36d4..4efc10ccf5b4 100644 --- a/src/components/checkbox/README.md +++ b/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
diff --git a/src/components/checkbox/checkbox.spec.ts b/src/components/checkbox/checkbox.spec.ts index 35f61163d433..131ffd63a565 100644 --- a/src/components/checkbox/checkbox.spec.ts +++ b/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; + 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: ` - Be good + Be good `, }) diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index e343466a5d92..34dbd4ba8c92 100644 --- a/src/components/checkbox/checkbox.ts +++ b/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, { diff --git a/src/components/checkbox/package.json b/src/components/checkbox/package.json index d62dbba0995d..dec0b028bc9f 100644 --- a/src/components/checkbox/package.json +++ b/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" } } diff --git a/src/components/input/input.spec.ts b/src/components/input/input.spec.ts index 764d5a90335c..ea8041671365 100644 --- a/src/components/input/input.spec.ts +++ b/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; })); diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 6dda9e0ca656..d3ccbebfc3a3 100644 --- a/src/components/input/input.ts +++ b/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'; diff --git a/src/components/input/package.json b/src/components/input/package.json index 156874f40cb3..348341128c8a 100644 --- a/src/components/input/package.json +++ b/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" } } diff --git a/src/components/radio/package.json b/src/components/radio/package.json index de83cec18695..1edbab8d6cdd 100644 --- a/src/components/radio/package.json +++ b/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" } } diff --git a/src/components/radio/radio.spec.ts b/src/components/radio/radio.spec.ts index 42e10572d17c..f2664efba3d2 100644 --- a/src/components/radio/radio.spec.ts +++ b/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); diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts index deecbe94f3e3..e39c3ccab847 100644 --- a/src/components/radio/radio.ts +++ b/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'; diff --git a/src/components/slide-toggle/package.json b/src/components/slide-toggle/package.json index 1627d9557f2b..b3787f8d0adc 100644 --- a/src/components/slide-toggle/package.json +++ b/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" } } diff --git a/src/components/slide-toggle/slide-toggle.spec.ts b/src/components/slide-toggle/slide-toggle.spec.ts index 1b3b45086e08..305be953ed70 100644 --- a/src/components/slide-toggle/slide-toggle.spec.ts +++ b/src/components/slide-toggle/slide-toggle.spec.ts @@ -3,6 +3,7 @@ import { describe, expect, beforeEach, + beforeEachProviders, inject, async } from '@angular/core/testing'; @@ -10,11 +11,16 @@ 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); diff --git a/src/components/slide-toggle/slide-toggle.ts b/src/components/slide-toggle/slide-toggle.ts index b8027c5a6bc1..fe9afc129171 100644 --- a/src/components/slide-toggle/slide-toggle.ts +++ b/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'; diff --git a/src/demo-app/checkbox/checkbox-demo.html b/src/demo-app/checkbox/checkbox-demo.html index f7629fc9345c..aae781f98d58 100644 --- a/src/demo-app/checkbox/checkbox-demo.html +++ b/src/demo-app/checkbox/checkbox-demo.html @@ -1,7 +1,7 @@

md-checkbox: Basic Example