Skip to content

Commit f27e538

Browse files
vsavkinvsavkin
committed
feat(forms): add optional controls
1 parent a73c643 commit f27e538

File tree

7 files changed

+219
-40
lines changed

7 files changed

+219
-40
lines changed

‎modules/angular2/forms.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export * from './src/forms/model';
22
export * from './src/forms/directives';
3-
export * from './src/forms/validators';
3+
export * from './src/forms/validators';
4+
export * from './src/forms/validator_directives';

‎modules/angular2/src/forms/directives.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -88,14 +88,13 @@ export class ControlDirective {
8888
_initialize() {
8989
this._groupDecorator.addDirective(this);
9090

91-
if (isPresent(this.validator)) {
92-
var c = this._control();
93-
c.validator = validators.compose([c.validator, this.validator]);
94-
}
91+
var c = this._control();
92+
c.validator = validators.compose([c.validator, this.validator]);
9593

9694
if (isBlank(this.valueAccessor)) {
9795
this.valueAccessor = controlValueAccessorFor(this.type);
9896
}
97+
9998
this._updateDomValue();
10099
DOM.on(this._el.domElement, "change", (_) => this._updateControlValue());
101100
}

‎modules/angular2/src/forms/model.js‎

Lines changed: 140 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,69 @@ import {nullValidator, controlGroupValidator} from './validators';
55
export const VALID = "VALID";
66
export const INVALID = "INVALID";
77

8+
//interface IControl {
9+
// get value():any;
10+
// validator:Function;
11+
// get status():string;
12+
// get errors():Map;
13+
// get active():boolean {}
14+
// updateValue(value:any){}
15+
// setParent(parent){}
16+
//}
17+
818
export class Control {
9-
value:any;
10-
validator:Function;
11-
status:string;
12-
errors;
19+
_value:any;
20+
_status:string;
21+
_errors;
22+
_updated:boolean;
1323
_parent:ControlGroup;
24+
validator:Function;
1425

1526
constructor(value:any, validator:Function = nullValidator) {
16-
this.value = value;
27+
this._value = value;
1728
this.validator = validator;
18-
this._updateStatus();
29+
this._updated = true;
1930
}
2031

2132
updateValue(value:any) {
22-
this.value = value;
23-
this._updateStatus();
33+
this._value = value;
34+
this._updated = true;
2435
this._updateParent();
2536
}
2637

38+
get active():boolean {
39+
return true;
40+
}
41+
42+
get value() {
43+
return this._value;
44+
}
45+
46+
get status() {
47+
this._updateIfNeeded();
48+
return this._status;
49+
}
50+
2751
get valid() {
28-
return this.status === VALID;
52+
this._updateIfNeeded();
53+
return this._status === VALID;
54+
}
55+
56+
get errors() {
57+
this._updateIfNeeded();
58+
return this._errors;
59+
}
60+
61+
setParent(parent){
62+
this._parent = parent;
2963
}
3064

31-
_updateStatus() {
32-
this.errors = this.validator(this);
33-
this.status = isPresent(this.errors) ? INVALID : VALID;
65+
_updateIfNeeded() {
66+
if (this._updated) {
67+
this._updated = false;
68+
this._errors = this.validator(this);
69+
this._status = isPresent(this._errors) ? INVALID : VALID;
70+
}
3471
}
3572

3673
_updateParent() {
@@ -41,42 +78,118 @@ export class Control {
4178
}
4279

4380
export class ControlGroup {
44-
controls;
81+
_value:any;
82+
_status:string;
83+
_errors;
84+
_updated:boolean;
4585
validator:Function;
46-
status:string;
47-
errors;
86+
controls;
4887

4988
constructor(controls, validator:Function = controlGroupValidator) {
5089
this.controls = controls;
5190
this.validator = validator;
91+
this._updated = true;
5292
this._setParentForControls();
53-
this._updateStatus();
5493
}
5594

5695
get value() {
57-
var res = {};
58-
StringMapWrapper.forEach(this.controls, (control, name) => {
59-
res[name] = control.value;
60-
});
61-
return res;
96+
this._updateIfNeeded();
97+
return this._value;
98+
}
99+
100+
get status() {
101+
this._updateIfNeeded();
102+
return this._status;
62103
}
63104

64105
get valid() {
65-
return this.status === VALID;
106+
this._updateIfNeeded();
107+
return this._status === VALID;
108+
}
109+
110+
get errors() {
111+
this._updateIfNeeded();
112+
return this._errors;
66113
}
67114

68115
_setParentForControls() {
69116
StringMapWrapper.forEach(this.controls, (control, name) => {
70-
control._parent = this;
117+
control.setParent(this);
71118
});
72119
}
73120

74-
_updateStatus() {
75-
this.errors = this.validator(this);
76-
this.status = isPresent(this.errors) ? INVALID : VALID;
121+
_updateIfNeeded() {
122+
if (this._updated) {
123+
this._updated = false;
124+
this._value = this._reduceValue();
125+
this._errors = this.validator(this);
126+
this._status = isPresent(this._errors) ? INVALID : VALID;
127+
}
128+
}
129+
130+
_reduceValue() {
131+
var newValue = {};
132+
StringMapWrapper.forEach(this.controls, (control, name) => {
133+
if (control.active) {
134+
newValue[name] = control.value;
135+
}
136+
});
137+
return newValue;
77138
}
78139

79140
_controlChanged() {
80-
this._updateStatus();
141+
this._updated = true;
81142
}
82143
}
144+
145+
export class OptionalControl {
146+
_control:Control;
147+
_cond:boolean;
148+
149+
constructor(control:Control, cond:boolean) {
150+
super();
151+
this._control = control;
152+
this._cond = cond;
153+
}
154+
155+
get active():boolean {
156+
return this._cond;
157+
}
158+
159+
get value() {
160+
return this._control.value;
161+
}
162+
163+
get status() {
164+
return this._control.status;
165+
}
166+
167+
get errors() {
168+
return this._control.errors;
169+
}
170+
171+
set validator(v) {
172+
this._control.validator = v;
173+
}
174+
175+
get validator() {
176+
return this._control.validator;
177+
}
178+
179+
set cond(value:boolean){
180+
this._cond = value;
181+
this._control._updateParent();
182+
}
183+
184+
get cond():boolean{
185+
return this._cond;
186+
}
187+
188+
updateValue(value:any){
189+
this._control.updateValue(value);
190+
}
191+
192+
setParent(parent){
193+
this._control.setParent(parent);
194+
}
195+
}

‎modules/angular2/src/forms/validators.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {List, ListWrapper, StringMapWrapper} from 'angular2/src/facade/collectio
44
import {ControlGroup, Control} from 'angular2/forms';
55

66
export function required(c:Control) {
7-
return isBlank(c.value) || c.value === "" ? {"required" : true} : null;
7+
return isBlank(c.value) || c.value == "" ? {"required" : true} : null;
88
}
99

1010
export function nullValidator(c:Control) {
@@ -13,17 +13,18 @@ export function nullValidator(c:Control) {
1313

1414
export function compose(validators:List<Function>):Function {
1515
return function(c:Control) {
16-
return ListWrapper.reduce(validators, (res, validator) => {
16+
var res = ListWrapper.reduce(validators, (res, validator) => {
1717
var errors = validator(c);
1818
return isPresent(errors) ? StringMapWrapper.merge(res, errors) : res;
1919
}, {});
20+
return StringMapWrapper.isEmpty(res) ? null : res;
2021
}
2122
}
2223

2324
export function controlGroupValidator(c:ControlGroup) {
2425
var res = {};
2526
StringMapWrapper.forEach(c.controls, (control, name) => {
26-
if (isPresent(control.errors)) {
27+
if (control.active && isPresent(control.errors)) {
2728
res[name] = control.errors;
2829
}
2930
});

‎modules/angular2/test/forms/integration_spec.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {MockTemplateResolver} from 'angular2/src/mock/template_resolver_mock';
1515
import {Injector} from 'angular2/di';
1616

1717
import {Component, Decorator, Template} from 'angular2/core';
18-
import {ControlGroupDirective, ControlDirective, Control, ControlGroup,
18+
import {ControlGroupDirective, ControlDirective, Control, ControlGroup, OptionalControl,
1919
ControlValueAccessor, RequiredValidatorDirective} from 'angular2/forms';
2020

2121
import * as validators from 'angular2/src/forms/validators';
@@ -42,7 +42,7 @@ export function main() {
4242

4343
tplResolver.setTemplate(componentType, new Template({
4444
inline: template,
45-
directives: [ControlGroupDirective, ControlDirective, WrappedValue]
45+
directives: [ControlGroupDirective, ControlDirective, WrappedValue, RequiredValidatorDirective]
4646
}));
4747

4848
compiler.compile(componentType).then((pv) => {

‎modules/angular2/test/forms/model_spec.js‎

Lines changed: 62 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {ddescribe, describe, it, iit, xit, expect, beforeEach, afterEach, el} from 'angular2/test_lib';
2-
import {ControlGroup, Control} from 'angular2/forms';
2+
import {ControlGroup, Control, OptionalControl} from 'angular2/forms';
33
import * as validations from 'angular2/forms';
44

55
export function main() {
@@ -40,7 +40,17 @@ export function main() {
4040
});
4141

4242
describe("validator", () => {
43-
it("should run the validator with the initial value", () => {
43+
it("should run the validator with the initial value (valid)", () => {
44+
var g = new ControlGroup({
45+
"one": new Control('value', validations.required)
46+
});
47+
48+
expect(g.valid).toEqual(true);
49+
50+
expect(g.errors).toEqual(null);
51+
});
52+
53+
it("should run the validator with the initial value (invalid)", () => {
4454
var g = new ControlGroup({
4555
"one": new Control(null, validations.required)
4656
});
@@ -61,4 +71,54 @@ export function main() {
6171
});
6272
});
6373
});
74+
75+
describe("OptionalControl", () => {
76+
it("should read properties from the wrapped component", () => {
77+
var wrapperControl = new Control("value", validations.required);
78+
var c = new OptionalControl(wrapperControl, true);
79+
80+
expect(c.value).toEqual('value');
81+
expect(c.status).toEqual('VALID');
82+
expect(c.validator).toEqual(validations.required);
83+
});
84+
85+
it("should update the wrapped component", () => {
86+
var wrappedControl = new Control("value");
87+
var c = new OptionalControl(wrappedControl, true);
88+
89+
c.validator = validations.required;
90+
c.updateValue("newValue");
91+
92+
93+
expect(wrappedControl.validator).toEqual(validations.required);
94+
expect(wrappedControl.value).toEqual('newValue');
95+
});
96+
97+
it("should not include an inactive component into the group value", () => {
98+
var group = new ControlGroup({
99+
"required" : new Control("requiredValue"),
100+
"optional" : new OptionalControl(new Control("optionalValue"), false)
101+
});
102+
103+
expect(group.value).toEqual({"required" : "requiredValue"});
104+
105+
group.controls["optional"].cond = true;
106+
107+
expect(group.value).toEqual({"required" : "requiredValue", "optional" : "optionalValue"});
108+
});
109+
110+
it("should not run validations on an inactive component", () => {
111+
var group = new ControlGroup({
112+
"required" : new Control("requiredValue", validations.required),
113+
"optional" : new OptionalControl(new Control("", validations.required), false)
114+
});
115+
116+
expect(group.valid).toEqual(true);
117+
118+
group.controls["optional"].cond = true;
119+
120+
expect(group.valid).toEqual(false);
121+
});
122+
});
123+
64124
}

‎modules/angular2/test/forms/validators_spec.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {ddescribe, describe, it, iit, xit, expect, beforeEach, afterEach, el} from 'angular2/test_lib';
2-
import {ControlGroup, Control, required, compose, controlGroupValidator} from 'angular2/forms';
2+
import {ControlGroup, Control, required, compose, controlGroupValidator, nullValidator} from 'angular2/forms';
33

44
export function main() {
55
function validator(key:string, error:any){
@@ -35,6 +35,11 @@ export function main() {
3535
var c = compose([validator("a", 1), validator("a", 2)]);
3636
expect(c(new Control(""))).toEqual({"a" : 2});
3737
});
38+
39+
it("should return null when no errors", () => {
40+
var c = compose([nullValidator, nullValidator]);
41+
expect(c(new Control(""))).toEqual(null);
42+
});
3843
});
3944

4045
describe("controlGroupValidator", () => {

0 commit comments

Comments
 (0)