feat(forms): made forms works with single controls

Author: vsavkin

modules/angular2/src/forms/directives.js

@@ -59,20 +59,20 @@ export class CheckboxControlValueAccessor {
   lifecycle: [onChange],
   selector: '[control]',
   bind: {
-    'controlName' : 'control'
+    'controlOrName' : 'control'
   }
 })
 export class ControlDirective {
   _groupDirective:ControlGroupDirective;
 
-  controlName:string;
+  controlOrName:any;
   valueAccessor:any; //ControlValueAccessor
 
   validator:Function;
 
-  constructor(@Ancestor() groupDirective:ControlGroupDirective, valueAccessor:DefaultValueAccessor)  {
+  constructor(@Optional() @Ancestor() groupDirective:ControlGroupDirective, valueAccessor:DefaultValueAccessor)  {
     this._groupDirective = groupDirective;
-    this.controlName = null;
+    this.controlOrName = null;
     this.valueAccessor = valueAccessor;
     this.validator = Validators.nullValidator;
   }
@@ -84,7 +84,9 @@ export class ControlDirective {
   }
 
   _initialize() {
-    this._groupDirective.addDirective(this);
+    if(isPresent(this._groupDirective)) {
+      this._groupDirective.addDirective(this);
+    }
 
     var c = this._control();
     c.validator = Validators.compose([c.validator, this.validator]);
@@ -102,7 +104,11 @@ export class ControlDirective {
   }
 
   _control() {
-    return this._groupDirective.findControl(this.controlName);
+    if (isString(this.controlOrName)) {
+      return this._groupDirective.findControl(this.controlOrName);
+    } else {
+      return this.controlOrName;
+    }
   }
 }
 

modules/angular2/test/forms/integration_spec.js

@@ -111,6 +111,24 @@ export function main() {
         });
       }));
 
+      it("should work with single controls", inject([AsyncTestCompleter], (async) => {
+        var control = new Control("loginValue");
+        var ctx = new MyComp(control);
+
+        var t = `<div><input type="text" [control]="form"></div>`;
+
+        compile(MyComp, t, ctx, (view) => {
+          var input = queryView(view, "input")
+          expect(input.value).toEqual("loginValue");
+
+          input.value = "updatedValue";
+          dispatchEvent(input, "change");
+
+          expect(control.value).toEqual("updatedValue");
+          async.done();
+        });
+      }));
+
       it("should update DOM elements when rebinding the control group", inject([AsyncTestCompleter], (async) => {
         var form = new ControlGroup({
           "login": new Control("oldValue")
@@ -376,7 +394,7 @@ export function main() {
   selector: "my-comp"
 })
 class MyComp {
-  form:ControlGroup;
+  form:any;
   name:string;
 
   constructor(form = null, name = null) {