From 3f7ebde037d92f8d93c6a40c0d73f840cac08287 Mon Sep 17 00:00:00 2001 From: vsavkin Date: Tue, 7 Jul 2015 15:53:16 -0700 Subject: [PATCH] feat(forms): changed all form directives to have basic control attributes --- modules/angular2/angular2.ts | 1 + modules/angular2/forms.ts | 1 + .../directives/abstract_control_directive.ts | 19 ++++ .../src/forms/directives/control_container.ts | 3 +- .../src/forms/directives/form_interface.ts | 3 +- .../src/forms/directives/ng_control.ts | 5 +- .../src/forms/directives/ng_control_group.ts | 6 +- .../angular2/src/forms/directives/ng_form.ts | 10 +- .../src/forms/directives/ng_form_model.ts | 6 ++ .../angular2/test/forms/directives_spec.ts | 95 +++++++++++++++++++ 10 files changed, 139 insertions(+), 10 deletions(-) create mode 100644 modules/angular2/src/forms/directives/abstract_control_directive.ts diff --git a/modules/angular2/angular2.ts b/modules/angular2/angular2.ts index 8f21f276ed..49a9e6136f 100644 --- a/modules/angular2/angular2.ts +++ b/modules/angular2/angular2.ts @@ -71,6 +71,7 @@ export * from './directives'; export { AbstractControl, + AbstractControlDirective, Control, ControlGroup, ControlArray, diff --git a/modules/angular2/forms.ts b/modules/angular2/forms.ts index ffc86bb6d0..01d7186f8d 100644 --- a/modules/angular2/forms.ts +++ b/modules/angular2/forms.ts @@ -15,6 +15,7 @@ export {AbstractControl, Control, ControlGroup, ControlArray} from './src/forms/model'; +export {AbstractControlDirective} from './src/forms/directives/abstract_control_directive'; export {NgControlName} from './src/forms/directives/ng_control_name'; export {NgFormControl} from './src/forms/directives/ng_form_control'; export {NgModel} from './src/forms/directives/ng_model'; diff --git a/modules/angular2/src/forms/directives/abstract_control_directive.ts b/modules/angular2/src/forms/directives/abstract_control_directive.ts new file mode 100644 index 0000000000..aef8e72217 --- /dev/null +++ b/modules/angular2/src/forms/directives/abstract_control_directive.ts @@ -0,0 +1,19 @@ +import {AbstractControl} from '../model'; + +export class AbstractControlDirective { + get control(): AbstractControl { return null; } + + get value(): any { return this.control.value; } + + get valid(): boolean { return this.control.valid; } + + get errors(): StringMap { return this.control.errors; } + + get pristine(): boolean { return this.control.pristine; } + + get dirty(): boolean { return this.control.dirty; } + + get touched(): boolean { return this.control.touched; } + + get untouched(): boolean { return this.control.untouched; } +} \ No newline at end of file diff --git a/modules/angular2/src/forms/directives/control_container.ts b/modules/angular2/src/forms/directives/control_container.ts index d5ff40b4ba..4796f64118 100644 --- a/modules/angular2/src/forms/directives/control_container.ts +++ b/modules/angular2/src/forms/directives/control_container.ts @@ -1,4 +1,5 @@ import {Form} from './form_interface'; +import {AbstractControlDirective} from './abstract_control_directive'; import {List} from 'angular2/src/facade/collection'; /** @@ -6,7 +7,7 @@ import {List} from 'angular2/src/facade/collection'; * * Only used by the forms module. */ -export class ControlContainer { +export class ControlContainer extends AbstractControlDirective { name: string; get formDirective(): Form { return null; } get path(): List { return null; } diff --git a/modules/angular2/src/forms/directives/form_interface.ts b/modules/angular2/src/forms/directives/form_interface.ts index 6452d095e2..f23e26f7d3 100644 --- a/modules/angular2/src/forms/directives/form_interface.ts +++ b/modules/angular2/src/forms/directives/form_interface.ts @@ -1,6 +1,6 @@ import {NgControl} from './ng_control'; import {NgControlGroup} from './ng_control_group'; -import {Control} from '../model'; +import {Control, ControlGroup} from '../model'; /** * An interface that {@link NgFormModel} and {@link NgForm} implement. @@ -13,5 +13,6 @@ export interface Form { getControl(dir: NgControl): Control; addControlGroup(dir: NgControlGroup): void; removeControlGroup(dir: NgControlGroup): void; + getControlGroup(dir: NgControlGroup): ControlGroup; updateModel(dir: NgControl, value: any): void; } \ No newline at end of file diff --git a/modules/angular2/src/forms/directives/ng_control.ts b/modules/angular2/src/forms/directives/ng_control.ts index 9e6f405a75..f8da836082 100644 --- a/modules/angular2/src/forms/directives/ng_control.ts +++ b/modules/angular2/src/forms/directives/ng_control.ts @@ -1,5 +1,5 @@ import {ControlValueAccessor} from './control_value_accessor'; -import {Control} from '../model'; +import {AbstractControlDirective} from './abstract_control_directive'; /** * An abstract class that all control directive extend. @@ -8,13 +8,12 @@ import {Control} from '../model'; * * @exportedAs angular2/forms */ -export class NgControl { +export class NgControl extends AbstractControlDirective { name: string = null; valueAccessor: ControlValueAccessor = null; get validator(): Function { return null; } get path(): List { return null; } - get control(): Control { return null; } viewToModelUpdate(newValue: any): void {} } diff --git a/modules/angular2/src/forms/directives/ng_control_group.ts b/modules/angular2/src/forms/directives/ng_control_group.ts index 8687f2ad9c..7f4bf65edd 100644 --- a/modules/angular2/src/forms/directives/ng_control_group.ts +++ b/modules/angular2/src/forms/directives/ng_control_group.ts @@ -5,6 +5,8 @@ import {CONST_EXPR} from 'angular2/src/facade/lang'; import {ControlContainer} from './control_container'; import {controlPath} from './shared'; +import {ControlGroup} from '../model'; +import {Form} from './form_interface'; const controlGroupBinding = CONST_EXPR(new Binding(ControlContainer, {toAlias: forwardRef(() => NgControlGroup)})); @@ -66,7 +68,9 @@ export class NgControlGroup extends ControlContainer { onDestroy() { this.formDirective.removeControlGroup(this); } + get control(): ControlGroup { return this.formDirective.getControlGroup(this); } + get path(): List { return controlPath(this.name, this._parent); } - get formDirective(): any { return this._parent.formDirective; } + get formDirective(): Form { return this._parent.formDirective; } } \ No newline at end of file diff --git a/modules/angular2/src/forms/directives/ng_form.ts b/modules/angular2/src/forms/directives/ng_form.ts index 33267eba1d..942eb55149 100644 --- a/modules/angular2/src/forms/directives/ng_form.ts +++ b/modules/angular2/src/forms/directives/ng_form.ts @@ -67,14 +67,12 @@ export class NgForm extends ControlContainer implements Form { get formDirective(): Form { return this; } + get control(): ControlGroup { return this.form; } + get path(): List { return []; } get controls(): StringMap { return this.form.controls; } - get value(): any { return this.form.value; } - - get errors(): any { return this.form.errors; } - addControl(dir: NgControl): void { this._later(_ => { var container = this._findContainer(dir.path); @@ -116,6 +114,10 @@ export class NgForm extends ControlContainer implements Form { }); } + getControlGroup(dir: NgControlGroup): ControlGroup { + return this.form.find(dir.path); + } + updateModel(dir: NgControl, value: any): void { this._later(_ => { var c = this.form.find(dir.path); diff --git a/modules/angular2/src/forms/directives/ng_form_model.ts b/modules/angular2/src/forms/directives/ng_form_model.ts index 6efc464cf2..690f1da868 100644 --- a/modules/angular2/src/forms/directives/ng_form_model.ts +++ b/modules/angular2/src/forms/directives/ng_form_model.ts @@ -102,6 +102,8 @@ export class NgFormModel extends ControlContainer implements Form { get formDirective(): Form { return this; } + get control(): ControlGroup { return this.form; } + get path(): List { return []; } addControl(dir: NgControl): void { @@ -119,6 +121,10 @@ export class NgFormModel extends ControlContainer implements Form { removeControlGroup(dir: NgControlGroup) {} + getControlGroup(dir: NgControlGroup): ControlGroup { + return this.form.find(dir.path); + } + updateModel(dir: NgControl, value: any): void { var c  = this.form.find(dir.path); c.updateValue(value); diff --git a/modules/angular2/test/forms/directives_spec.ts b/modules/angular2/test/forms/directives_spec.ts index 60338a5a3a..31d2f2a9d7 100644 --- a/modules/angular2/test/forms/directives_spec.ts +++ b/modules/angular2/test/forms/directives_spec.ts @@ -56,6 +56,17 @@ export function main() { loginControlDir.valueAccessor = new DummyControlValueAccessor(); }); + it("should reexport control properties", () => { + expect(form.control).toBe(formModel); + expect(form.value).toBe(formModel.value); + expect(form.valid).toBe(formModel.valid); + expect(form.errors).toBe(formModel.errors); + expect(form.pristine).toBe(formModel.pristine); + expect(form.dirty).toBe(formModel.dirty); + expect(form.touched).toBe(formModel.touched); + expect(form.untouched).toBe(formModel.untouched); + }); + describe("addControl", () => { it("should throw when no control found", () => { var dir = new NgControlName(form, null); @@ -137,6 +148,17 @@ export function main() { loginControlDir.valueAccessor = new DummyControlValueAccessor(); }); + it("should reexport control properties", () => { + expect(form.control).toBe(formModel); + expect(form.value).toBe(formModel.value); + expect(form.valid).toBe(formModel.valid); + expect(form.errors).toBe(formModel.errors); + expect(form.pristine).toBe(formModel.pristine); + expect(form.dirty).toBe(formModel.dirty); + expect(form.touched).toBe(formModel.touched); + expect(form.untouched).toBe(formModel.untouched); + }); + describe("addControl & addControlGroup", () => { it("should create a control with the given name", fakeAsync(() => { form.addControlGroup(personControlGroupDir); @@ -168,6 +190,31 @@ export function main() { }); }); + describe("NgControlGroup", () => { + var formModel; + var controlGroupDir; + + beforeEach(() => { + formModel = new ControlGroup({"login": new Control(null)}); + + var parent = new NgFormModel(); + parent.form = new ControlGroup({"group": formModel}); + controlGroupDir = new NgControlGroup(parent); + controlGroupDir.name = "group"; + }); + + it("should reexport control properties", () => { + expect(controlGroupDir.control).toBe(formModel); + expect(controlGroupDir.value).toBe(formModel.value); + expect(controlGroupDir.valid).toBe(formModel.valid); + expect(controlGroupDir.errors).toBe(formModel.errors); + expect(controlGroupDir.pristine).toBe(formModel.pristine); + expect(controlGroupDir.dirty).toBe(formModel.dirty); + expect(controlGroupDir.touched).toBe(formModel.touched); + expect(controlGroupDir.untouched).toBe(formModel.untouched); + }); + }); + describe("NgFormControl", () => { var controlDir; var control; @@ -180,6 +227,17 @@ export function main() { controlDir.form = control; }); + it("should reexport control properties", () => { + expect(controlDir.control).toBe(control); + expect(controlDir.value).toBe(control.value); + expect(controlDir.valid).toBe(control.valid); + expect(controlDir.errors).toBe(control.errors); + expect(controlDir.pristine).toBe(control.pristine); + expect(controlDir.dirty).toBe(control.dirty); + expect(controlDir.touched).toBe(control.touched); + expect(controlDir.untouched).toBe(control.untouched); + }); + it("should set up validator", () => { controlDir.ngValidators.reset([new NgRequiredValidator()]); @@ -200,6 +258,18 @@ export function main() { ngModel.valueAccessor = new DummyControlValueAccessor(); }); + it("should reexport control properties", () => { + var control = ngModel.control; + expect(ngModel.control).toBe(control); + expect(ngModel.value).toBe(control.value); + expect(ngModel.valid).toBe(control.valid); + expect(ngModel.errors).toBe(control.errors); + expect(ngModel.pristine).toBe(control.pristine); + expect(ngModel.dirty).toBe(control.dirty); + expect(ngModel.touched).toBe(control.touched); + expect(ngModel.untouched).toBe(control.untouched); + }); + it("should set up validator", () => { ngModel.ngValidators.reset([new NgRequiredValidator()]); @@ -211,5 +281,30 @@ export function main() { expect(ngModel.control.valid).toBe(false); }); }); + + describe("NgControlName", () => { + var formModel; + var controlNameDir; + + beforeEach(() => { + formModel = new Control("name"); + + var parent = new NgFormModel(); + parent.form = new ControlGroup({"name": formModel}); + controlNameDir = new NgControlName(parent, new QueryList()); + controlNameDir.name = "name"; + }); + + it("should reexport control properties", () => { + expect(controlNameDir.control).toBe(formModel); + expect(controlNameDir.value).toBe(formModel.value); + expect(controlNameDir.valid).toBe(formModel.valid); + expect(controlNameDir.errors).toBe(formModel.errors); + expect(controlNameDir.pristine).toBe(formModel.pristine); + expect(controlNameDir.dirty).toBe(formModel.dirty); + expect(controlNameDir.touched).toBe(formModel.touched); + expect(controlNameDir.untouched).toBe(formModel.untouched); + }); + }); }); }