feat(forms): add support for nested forms

This commit is contained in:
vsavkin 2015-02-25 15:10:27 -08:00
parent 7ddfbf8bea
commit 733915d99b
4 changed files with 234 additions and 164 deletions

View File

@ -1,6 +1,7 @@
import {Template, Component, Decorator, NgElement, Ancestor, onChange} from 'angular2/core';
import {Optional} from 'angular2/di';
import {DOM} from 'angular2/src/dom/dom_adapter';
import {isBlank, isPresent, CONST} from 'angular2/src/facade/lang';
import {isBlank, isPresent, isString, CONST} from 'angular2/src/facade/lang';
import {StringMapWrapper, ListWrapper} from 'angular2/src/facade/collection';
import {ControlGroup, Control} from './model';
import * as validators from './validators';
@ -64,7 +65,7 @@ function controlValueAccessorFor(controlType:string):ControlValueAccessor {
}
})
export class ControlDirective {
_groupDecorator:ControlGroupDirective;
_groupDirective:ControlGroupDirective;
_el:NgElement;
controlName:string;
@ -73,8 +74,8 @@ export class ControlDirective {
validator:Function;
constructor(@Ancestor() groupDecorator:ControlGroupDirective, el:NgElement) {
this._groupDecorator = groupDecorator;
constructor(@Ancestor() groupDirective:ControlGroupDirective, el:NgElement) {
this._groupDirective = groupDirective;
this._el = el;
this.validator = validators.nullValidator;
}
@ -86,7 +87,7 @@ export class ControlDirective {
}
_initialize() {
this._groupDecorator.addDirective(this);
this._groupDirective.addDirective(this);
var c = this._control();
c.validator = validators.compose([c.validator, this.validator]);
@ -108,7 +109,7 @@ export class ControlDirective {
}
_control() {
return this._groupDecorator.findControl(this.controlName);
return this._groupDirective.findControl(this.controlName);
}
}
@ -119,16 +120,28 @@ export class ControlDirective {
}
})
export class ControlGroupDirective {
_groupDirective:ControlGroupDirective;
_controlGroupName:string;
_controlGroup:ControlGroup;
_directives:List<ControlDirective>;
constructor() {
constructor(@Optional() @Ancestor() groupDirective:ControlGroupDirective) {
super();
this._groupDirective = groupDirective;
this._directives = ListWrapper.create();
}
set controlGroup(controlGroup:ControlGroup) {
this._controlGroup = controlGroup;
set controlGroup(controlGroup) {
if (isString(controlGroup)) {
this._controlGroupName = controlGroup;
} else {
this._controlGroup = controlGroup;
}
this._updateDomValue();
}
_updateDomValue() {
ListWrapper.forEach(this._directives, (cd) => cd._updateDomValue());
}
@ -136,8 +149,16 @@ export class ControlGroupDirective {
ListWrapper.push(this._directives, c);
}
findControl(name:string):Control {
return this._controlGroup.controls[name];
findControl(name:string):any {
return this._getControlGroup().controls[name];
}
_getControlGroup():ControlGroup {
if (isPresent(this._controlGroupName)) {
return this._groupDirective.findControl(this._controlGroupName)
} else {
return this._controlGroup;
}
}
}

View File

@ -16,7 +16,7 @@ export const INVALID = "INVALID";
// setParent(parent){}
//}
export class Control {
export class AbstractControl {
_value:any;
_status:string;
_errors;
@ -24,23 +24,17 @@ export class Control {
_parent:ControlGroup;
validator:Function;
constructor(value:any, validator:Function = nullValidator) {
this._value = value;
constructor(validator:Function = nullValidator) {
this.validator = validator;
this._dirty = true;
}
updateValue(value:any) {
this._value = value;
this._dirty = true;
this._updateParent();
}
get active():boolean {
return true;
}
get value() {
this._updateIfNeeded();
return this._value;
}
@ -64,11 +58,6 @@ export class Control {
}
_updateIfNeeded() {
if (this._dirty) {
this._dirty = false;
this._errors = this.validator(this);
this._status = isPresent(this._errors) ? INVALID : VALID;
}
}
_updateParent() {
@ -78,41 +67,36 @@ export class Control {
}
}
export class ControlGroup {
_value:any;
_status:string;
_errors;
_dirty:boolean;
validator:Function;
export class Control extends AbstractControl {
constructor(value:any, validator:Function = nullValidator) {
super(validator);
this._value = value;
}
updateValue(value:any) {
this._value = value;
this._dirty = true;
this._updateParent();
}
_updateIfNeeded() {
if (this._dirty) {
this._dirty = false;
this._errors = this.validator(this);
this._status = isPresent(this._errors) ? INVALID : VALID;
}
}
}
export class ControlGroup extends AbstractControl {
controls;
constructor(controls, validator:Function = controlGroupValidator) {
super(validator);
this.controls = controls;
this.validator = validator;
this._dirty = true;
this._setParentForControls();
}
get value() {
this._updateIfNeeded();
return this._value;
}
get status() {
this._updateIfNeeded();
return this._status;
}
get valid() {
this._updateIfNeeded();
return this._status === VALID;
}
get errors() {
this._updateIfNeeded();
return this._errors;
}
_setParentForControls() {
StringMapWrapper.forEach(this.controls, (control, name) => {
control.setParent(this);
@ -140,6 +124,7 @@ export class ControlGroup {
_controlChanged() {
this._dirty = true;
this._updateParent();
}
}

View File

@ -218,6 +218,54 @@ export function main() {
});
});
});
describe("nested forms", () => {
it("should init DOM with the given form object", (done) => {
var form = new ControlGroup({
"nested": new ControlGroup({
"login": new Control("value")
})
});
var ctx = new MyComp(form);
var t = `<div [control-group]="form">
<div control-group="nested">
<input type="text" control="login">
</div>
</div>`;
compile(MyComp, t, ctx, (view) => {
var input = queryView(view, "input")
expect(input.value).toEqual("value");
done();
});
});
it("should update the control group values on DOM change", (done) => {
var form = new ControlGroup({
"nested": new ControlGroup({
"login": new Control("value")
})
});
var ctx = new MyComp(form);
var t = `<div [control-group]="form">
<div control-group="nested">
<input type="text" control="login">
</div>
</div>`;
compile(MyComp, t, ctx, (view) => {
var input = queryView(view, "input")
input.value = "updatedValue";
dispatchEvent(input, "change");
expect(form.value).toEqual({"nested" : {"login" : "updatedValue"}});
done();
});
});
});
});
}

View File

@ -3,121 +3,137 @@ import {ControlGroup, Control, OptionalControl} from 'angular2/forms';
import * as validations from 'angular2/forms';
export function main() {
describe("Control", () => {
describe("validator", () => {
it("should run validator with the initial value", () => {
var c = new Control("value", validations.required);
expect(c.valid).toEqual(true);
});
it("should rerun the validator when the value changes", () => {
var c = new Control("value", validations.required);
c.updateValue(null);
expect(c.valid).toEqual(false);
});
it("should return errors", () => {
var c = new Control(null, validations.required);
expect(c.errors).toEqual({"required" : true});
});
});
});
describe("ControlGroup", () => {
describe("value", () => {
it("should be the reduced value of the child controls", () => {
var g = new ControlGroup({
"one": new Control("111"),
"two": new Control("222")
});
expect(g.value).toEqual({"one": "111", "two": "222"})
});
it("should be empty when there are no child controls", () => {
var g = new ControlGroup({});
expect(g.value).toEqual({})
});
});
describe("validator", () => {
it("should run the validator with the initial value (valid)", () => {
var g = new ControlGroup({
"one": new Control('value', validations.required)
describe("Form Model", () => {
describe("Control", () => {
describe("validator", () => {
it("should run validator with the initial value", () => {
var c = new Control("value", validations.required);
expect(c.valid).toEqual(true);
});
expect(g.valid).toEqual(true);
it("should rerun the validator when the value changes", () => {
var c = new Control("value", validations.required);
c.updateValue(null);
expect(c.valid).toEqual(false);
});
expect(g.errors).toEqual(null);
});
it("should run the validator with the initial value (invalid)", () => {
var one = new Control(null, validations.required);
var g = new ControlGroup({"one": one});
expect(g.valid).toEqual(false);
expect(g.errors).toEqual({"required": [one]});
});
it("should run the validator with the value changes", () => {
var c = new Control(null, validations.required);
var g = new ControlGroup({"one": c});
c.updateValue("some value");
expect(g.valid).toEqual(true);
expect(g.errors).toEqual(null);
it("should return errors", () => {
var c = new Control(null, validations.required);
expect(c.errors).toEqual({"required" : true});
});
});
});
describe("ControlGroup", () => {
describe("value", () => {
it("should be the reduced value of the child controls", () => {
var g = new ControlGroup({
"one": new Control("111"),
"two": new Control("222")
});
expect(g.value).toEqual({"one": "111", "two": "222"});
});
it("should be empty when there are no child controls", () => {
var g = new ControlGroup({});
expect(g.value).toEqual({});
});
it("should support nested groups", () => {
var g = new ControlGroup({
"one": new Control("111"),
"nested": new ControlGroup({
"two" : new Control("222")
})
});
expect(g.value).toEqual({"one": "111", "nested" : {"two": "222"}});
g.controls["nested"].controls["two"].updateValue("333");
expect(g.value).toEqual({"one": "111", "nested" : {"two": "333"}});
});
});
describe("validator", () => {
it("should run the validator with the initial value (valid)", () => {
var g = new ControlGroup({
"one": new Control('value', validations.required)
});
expect(g.valid).toEqual(true);
expect(g.errors).toEqual(null);
});
it("should run the validator with the initial value (invalid)", () => {
var one = new Control(null, validations.required);
var g = new ControlGroup({"one": one});
expect(g.valid).toEqual(false);
expect(g.errors).toEqual({"required": [one]});
});
it("should run the validator with the value changes", () => {
var c = new Control(null, validations.required);
var g = new ControlGroup({"one": c});
c.updateValue("some value");
expect(g.valid).toEqual(true);
expect(g.errors).toEqual(null);
});
});
});
describe("OptionalControl", () => {
it("should read properties from the wrapped component", () => {
var wrapperControl = new Control("value", validations.required);
var c = new OptionalControl(wrapperControl, true);
expect(c.value).toEqual('value');
expect(c.status).toEqual('VALID');
expect(c.validator).toEqual(validations.required);
});
it("should update the wrapped component", () => {
var wrappedControl = new Control("value");
var c = new OptionalControl(wrappedControl, true);
c.validator = validations.required;
c.updateValue("newValue");
expect(wrappedControl.validator).toEqual(validations.required);
expect(wrappedControl.value).toEqual('newValue');
});
it("should not include an inactive component into the group value", () => {
var group = new ControlGroup({
"required" : new Control("requiredValue"),
"optional" : new OptionalControl(new Control("optionalValue"), false)
});
expect(group.value).toEqual({"required" : "requiredValue"});
group.controls["optional"].cond = true;
expect(group.value).toEqual({"required" : "requiredValue", "optional" : "optionalValue"});
});
it("should not run validations on an inactive component", () => {
var group = new ControlGroup({
"required" : new Control("requiredValue", validations.required),
"optional" : new OptionalControl(new Control("", validations.required), false)
});
expect(group.valid).toEqual(true);
group.controls["optional"].cond = true;
expect(group.valid).toEqual(false);
});
});
});
describe("OptionalControl", () => {
it("should read properties from the wrapped component", () => {
var wrapperControl = new Control("value", validations.required);
var c = new OptionalControl(wrapperControl, true);
expect(c.value).toEqual('value');
expect(c.status).toEqual('VALID');
expect(c.validator).toEqual(validations.required);
});
it("should update the wrapped component", () => {
var wrappedControl = new Control("value");
var c = new OptionalControl(wrappedControl, true);
c.validator = validations.required;
c.updateValue("newValue");
expect(wrappedControl.validator).toEqual(validations.required);
expect(wrappedControl.value).toEqual('newValue');
});
it("should not include an inactive component into the group value", () => {
var group = new ControlGroup({
"required" : new Control("requiredValue"),
"optional" : new OptionalControl(new Control("optionalValue"), false)
});
expect(group.value).toEqual({"required" : "requiredValue"});
group.controls["optional"].cond = true;
expect(group.value).toEqual({"required" : "requiredValue", "optional" : "optionalValue"});
});
it("should not run validations on an inactive component", () => {
var group = new ControlGroup({
"required" : new Control("requiredValue", validations.required),
"optional" : new OptionalControl(new Control("", validations.required), false)
});
expect(group.valid).toEqual(true);
group.controls["optional"].cond = true;
expect(group.valid).toEqual(false);
});
});
}