feat(forms): add support for nested forms

Author: vsavkin

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) {
- 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,25 +120,45 @@ 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());
  }
 
  addDirective(c:ControlDirective) {
  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;
+ }
  }
 }
 

modules/angular2/src/forms/model.js

@@ -16,31 +16,25 @@ export const INVALID = "INVALID";
 // setParent(parent){}
 //}
 
-export class Control {
+export class AbstractControl {
  _value:any;
  _status:string;
  _errors;
  _dirty:boolean;
  _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,39 +67,34 @@ export class Control {
  }
 }
 
-export class ControlGroup {
- _value:any;
- _status:string;
- _errors;
- _dirty:boolean;
- validator:Function;
- controls;
-
- constructor(controls, validator:Function = controlGroupValidator) {
- this.controls = controls;
- this.validator = validator;
- this._dirty = true;
- this._setParentForControls();
+export class Control extends AbstractControl {
+ constructor(value:any, validator:Function = nullValidator) {
+ super(validator);
+ this._value = value;
  }
 
- get value() {
- this._updateIfNeeded();
- return this._value;
+ updateValue(value:any) {
+ this._value = value;
+ this._dirty = true;
+ this._updateParent();
  }
 
- get status() {
- this._updateIfNeeded();
- return this._status;
+ _updateIfNeeded() {
+ if (this._dirty) {
+ this._dirty = false;
+ this._errors = this.validator(this);
+ this._status = isPresent(this._errors) ? INVALID : VALID;
+ }
  }
+}
 
- get valid() {
- this._updateIfNeeded();
- return this._status === VALID;
- }
+export class ControlGroup extends AbstractControl {
+ controls;
 
- get errors() {
- this._updateIfNeeded();
- return this._errors;
+ constructor(controls, validator:Function = controlGroupValidator) {
+ super(validator);
+ this.controls = controls;
+ this._setParentForControls();
  }
 
  _setParentForControls() {
@@ -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();
+ });
+ });
+ });
  });
 }