diff --git a/modules/angular2/src/forms/directives.js b/modules/angular2/src/forms/directives.js index c937f57b97..f0f7aba1e4 100644 --- a/modules/angular2/src/forms/directives.js +++ b/modules/angular2/src/forms/directives.js @@ -1,27 +1,28 @@ import {Template, Component, Decorator, Ancestor, onChange, PropertySetter} from 'angular2/angular2'; import {Optional} from 'angular2/di'; -import {DOM} from 'angular2/src/dom/dom_adapter'; import {isBlank, isPresent, isString, CONST} from 'angular2/src/facade/lang'; import {StringMapWrapper, ListWrapper} from 'angular2/src/facade/collection'; import {ControlGroup, Control} from './model'; import {Validators} from './validators'; -export class ControlValueAccessor { - writeValue(value):void{} - set onChange(fn){} -} +//export interface ControlValueAccessor { +// writeValue(value):void{} +// set onChange(fn){} +//} @Decorator({ selector: '[control]', events: { - 'change' : 'onChange($event.target.value)' + 'change' : 'onChange($event.target.value)', + 'input' : 'onChange($event.target.value)' } }) -export class DefaultControlDecorator extends ControlValueAccessor { +export class DefaultValueAccessor { _setValueProperty:Function; onChange:Function; constructor(@PropertySetter('value') setValueProperty:Function) { + super(); this._setValueProperty = setValueProperty; this.onChange = (_) => {}; } @@ -33,19 +34,20 @@ export class DefaultControlDecorator extends ControlValueAccessor { @Decorator({ selector: 'input[type=checkbox]', //should be input[type=checkbox][control] + // change the selector once https://github.com/angular/angular/issues/1025 is fixed events: { 'change' : 'onChange($event.target.checked)' } }) -export class CheckboxControlDecorator extends ControlValueAccessor { +export class CheckboxControlValueAccessor { _setCheckedProperty:Function; onChange:Function; constructor(cd:ControlDirective, @PropertySetter('checked') setCheckedProperty:Function) { + super(); this._setCheckedProperty = setCheckedProperty; this.onChange = (_) => {}; - //TODO: vsavkin ControlDirective should inject CheckboxControlDirective - cd.valueAccessor = this; + cd.valueAccessor = this; //ControlDirective should inject CheckboxControlDirective } writeValue(value) { @@ -64,11 +66,11 @@ export class ControlDirective { _groupDirective:ControlGroupDirective; controlName:string; - valueAccessor:ControlValueAccessor; + valueAccessor:any; //ControlValueAccessor validator:Function; - constructor(@Ancestor() groupDirective:ControlGroupDirective, valueAccessor:DefaultControlDecorator) { + constructor(@Ancestor() groupDirective:ControlGroupDirective, valueAccessor:DefaultValueAccessor) { this._groupDirective = groupDirective; this.controlName = null; this.valueAccessor = valueAccessor; @@ -99,10 +101,6 @@ export class ControlDirective { this.valueAccessor.onChange = (newValue) => this._control().updateValue(newValue); } - _updateControlValue(newValue) { - this._control().updateValue(newValue); - } - _control() { return this._groupDirective.findControl(this.controlName); } @@ -158,5 +156,5 @@ export class ControlGroupDirective { } export var FormDirectives = [ - ControlGroupDirective, ControlDirective, CheckboxControlDecorator, DefaultControlDecorator + ControlGroupDirective, ControlDirective, CheckboxControlValueAccessor, DefaultValueAccessor ]; diff --git a/modules/angular2/test/forms/integration_spec.js b/modules/angular2/test/forms/integration_spec.js index b040830fb5..f078b0c883 100644 --- a/modules/angular2/test/forms/integration_spec.js +++ b/modules/angular2/test/forms/integration_spec.js @@ -33,8 +33,8 @@ import {Injector} from 'angular2/di'; import {Component, Decorator, Template, PropertySetter} from 'angular2/angular2'; import {ControlGroupDirective, ControlDirective, Control, ControlGroup, OptionalControl, - ControlValueAccessor, RequiredValidatorDirective, CheckboxControlDecorator, - DefaultControlDecorator, Validators} from 'angular2/forms'; + ControlValueAccessor, RequiredValidatorDirective, CheckboxControlValueAccessor, + DefaultValueAccessor, Validators} from 'angular2/forms'; export function main() { function detectChanges(view) { @@ -60,7 +60,7 @@ export function main() { tplResolver.setTemplate(componentType, new Template({ inline: template, directives: [ControlGroupDirective, ControlDirective, WrappedValue, RequiredValidatorDirective, - CheckboxControlDecorator, DefaultControlDecorator] + CheckboxControlValueAccessor, DefaultValueAccessor] })); compiler.compile(componentType).then((pv) => { @@ -72,24 +72,24 @@ export function main() { }); } - describe("integration tests", () => { - it("should initialize DOM elements with the given form object", inject([AsyncTestCompleter], (async) => { - var ctx = new MyComp(new ControlGroup({ - "login": new Control("loginValue") - })); + if (DOM.supportsDOMEvents()) { + describe("integration tests", () => { + it("should initialize DOM elements with the given form object", inject([AsyncTestCompleter], (async) => { + var ctx = new MyComp(new ControlGroup({ + "login": new Control("loginValue") + })); - var t = `