feat(forms): add support for nested forms

modules/angular2/src/forms/directives.js

@@ -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)  {
+  constructor(@Ancestor() groupDirective:ControlGroupDirective, el:NgElement)  {
-    this._groupDecorator = groupDecorator;
+    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) {
+  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 {
+  findControl(name:string):any {
-    return this._controlGroup.controls[name];
+    return this._getControlGroup().controls[name];
+  }
+
+  _getControlGroup():ControlGroup {
+    if (isPresent(this._controlGroupName)) {
+      return this._groupDirective.findControl(this._controlGroupName)
+    } else {
+      return this._controlGroup;
+    }
   }
 }
 

modules/angular2/src/forms/model.js

@@ -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) {
+  constructor(validator:Function = nullValidator) {
-    this._value = value;
     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 {
+export class Control extends AbstractControl {
-  _value:any;
+  constructor(value:any, validator:Function = nullValidator) {
-  _status:string;
+    super(validator);
-  _errors;
+    this._value = value;
-  _dirty:boolean;
+  }
-  validator:Function;
+
+  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();
   }
 }
 

modules/angular2/test/forms/integration_spec.js

@@ -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();
+        });
+      });
+    });
   });
 }
 

modules/angular2/test/forms/model_spec.js

@@ -3,6 +3,7 @@ import {ControlGroup, Control, OptionalControl} from 'angular2/forms';
 import * as validations from 'angular2/forms';
 
 export function main() {
+  describe("Form Model", () => {
     describe("Control", () => {
       describe("validator", () => {
         it("should run validator with the initial value", () => {
@@ -30,12 +31,26 @@ export function main() {
             "one": new Control("111"),
             "two": new Control("222")
           });
-        expect(g.value).toEqual({"one": "111", "two": "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({})
+          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"}});
         });
       });
 
@@ -120,4 +135,5 @@ export function main() {
       });
     });
 
+  });
 }