Skip to content

Commit

Permalink
feat(forms): changed all form directives to have basic control attrib…
Browse files Browse the repository at this point in the history
…utes
  • Loading branch information
vsavkin committed Jul 8, 2015
1 parent 4656c6f commit 3f7ebde
Show file tree
Hide file tree
Showing 10 changed files with 139 additions and 10 deletions.
1 change: 1 addition & 0 deletions modules/angular2/angular2.ts
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ export * from './directives';

export {
AbstractControl,
AbstractControlDirective,
Control,
ControlGroup,
ControlArray,
Expand Down
1 change: 1 addition & 0 deletions modules/angular2/forms.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
@@ -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<string, any> { 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; }
}
3 changes: 2 additions & 1 deletion modules/angular2/src/forms/directives/control_container.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import {Form} from './form_interface';
import {AbstractControlDirective} from './abstract_control_directive';
import {List} from 'angular2/src/facade/collection';

/**
* A directive that contains a group of [NgControl].
*
* Only used by the forms module.
*/
export class ControlContainer {
export class ControlContainer extends AbstractControlDirective {
name: string;
get formDirective(): Form { return null; }
get path(): List<string> { return null; }
Expand Down
3 changes: 2 additions & 1 deletion modules/angular2/src/forms/directives/form_interface.ts
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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;
}
5 changes: 2 additions & 3 deletions modules/angular2/src/forms/directives/ng_control.ts
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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<string> { return null; }
get control(): Control { return null; }

viewToModelUpdate(newValue: any): void {}
}
6 changes: 5 additions & 1 deletion modules/angular2/src/forms/directives/ng_control_group.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)}));
Expand Down Expand Up @@ -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<string> { return controlPath(this.name, this._parent); }

get formDirective(): any { return this._parent.formDirective; }
get formDirective(): Form { return this._parent.formDirective; }
}
10 changes: 6 additions & 4 deletions modules/angular2/src/forms/directives/ng_form.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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<string> { return []; }

get controls(): StringMap<string, AbstractControl> { 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);
Expand Down Expand Up @@ -116,6 +114,10 @@ export class NgForm extends ControlContainer implements Form {
});
}

getControlGroup(dir: NgControlGroup): ControlGroup {
return <ControlGroup>this.form.find(dir.path);
}

updateModel(dir: NgControl, value: any): void {
this._later(_ => {
var c = <Control>this.form.find(dir.path);
Expand Down
6 changes: 6 additions & 0 deletions modules/angular2/src/forms/directives/ng_form_model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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<string> { return []; }

addControl(dir: NgControl): void {
Expand All @@ -119,6 +121,10 @@ export class NgFormModel extends ControlContainer implements Form {

removeControlGroup(dir: NgControlGroup) {}

getControlGroup(dir: NgControlGroup): ControlGroup {
return <ControlGroup>this.form.find(dir.path);
}

updateModel(dir: NgControl, value: any): void {
var c  = <Control>this.form.find(dir.path);
c.updateValue(value);
Expand Down
95 changes: 95 additions & 0 deletions modules/angular2/test/forms/directives_spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand All @@ -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()]);

Expand All @@ -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()]);

Expand All @@ -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<any>());
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);
});
});
});
}

0 comments on commit 3f7ebde

Please sign in to comment.