diff --git a/modules/angular2/src/forms/directives.js b/modules/angular2/src/forms/directives.js index f0f7aba1e4..1debb02cb6 100644 --- a/modules/angular2/src/forms/directives.js +++ b/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; + } } } diff --git a/modules/angular2/test/forms/integration_spec.js b/modules/angular2/test/forms/integration_spec.js index f078b0c883..4a7123e9dd 100644 --- a/modules/angular2/test/forms/integration_spec.js +++ b/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 = `
`; + + 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) {