feat(forms): added value accessor for input=text

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 {
+//export interface ControlValueAccessor {
-  writeValue(value):void{}
+//  writeValue(value):void{}
-  set onChange(fn){}
+//  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; //ControlDirective should inject CheckboxControlDirective
-    cd.valueAccessor = this;
   }
 
   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
 ];

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,
+  ControlValueAccessor, RequiredValidatorDirective, CheckboxControlValueAccessor,
-  DefaultControlDecorator, Validators} from 'angular2/forms';
+  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,6 +72,7 @@ export function main() {
     });
   }
 
+  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({
@@ -89,7 +90,6 @@ export function main() {
         });
       }));
 
-    if (DOM.supportsDOMEvents()) {
       it("should update the control group values on DOM change", inject([AsyncTestCompleter], (async) => {
         var form = new ControlGroup({
           "login": new Control("oldValue")
@@ -110,7 +110,6 @@ export function main() {
           async.done();
         });
       }));
-    }
 
       it("should update DOM elements when rebinding the control group", inject([AsyncTestCompleter], (async) => {
         var form = new ControlGroup({
@@ -156,9 +155,65 @@ export function main() {
         });
       }));
 
-    if (DOM.supportsDOMEvents()) {
       describe("different control types", () => {
-        it("should support type=checkbox", inject([AsyncTestCompleter], (async) => {
+        it("should support <input type=text>", inject([AsyncTestCompleter], (async) => {
+          var ctx = new MyComp(new ControlGroup({"text": new Control("old")}));
+
+          var t = `<div [control-group]="form">
+                    <input type="text" control="text">
+                  </div>`;
+
+          compile(MyComp, t, ctx, (view) => {
+            var input = queryView(view, "input")
+            expect(input.value).toEqual("old");
+
+            input.value = "new";
+            dispatchEvent(input, "input");
+
+            expect(ctx.form.value).toEqual({"text": "new"});
+            async.done();
+          });
+        }));
+
+        it("should support <input> without type", inject([AsyncTestCompleter], (async) => {
+          var ctx = new MyComp(new ControlGroup({"text": new Control("old")}));
+
+          var t = `<div [control-group]="form">
+                    <input control="text">
+                  </div>`;
+
+          compile(MyComp, t, ctx, (view) => {
+            var input = queryView(view, "input")
+            expect(input.value).toEqual("old");
+
+            input.value = "new";
+            dispatchEvent(input, "input");
+
+            expect(ctx.form.value).toEqual({"text": "new"});
+            async.done();
+          });
+        }));
+
+        it("should support <textarea>", inject([AsyncTestCompleter], (async) => {
+          var ctx = new MyComp(new ControlGroup({"text": new Control('old')}));
+
+          var t = `<div [control-group]="form">
+                    <textarea control="text"></textarea>
+                  </div>`;
+
+          compile(MyComp, t, ctx, (view) => {
+            var textarea = queryView(view, "textarea")
+            expect(textarea.value).toEqual("old");
+
+            textarea.value = "new";
+            dispatchEvent(textarea, "input");
+
+            expect(ctx.form.value).toEqual({"text": 'new'});
+            async.done();
+          });
+        }));
+
+        it("should support <type=checkbox>", inject([AsyncTestCompleter], (async) => {
           var ctx = new MyComp(new ControlGroup({"checkbox": new Control(true)}));
 
           var t = `<div [control-group]="form">
@@ -177,26 +232,7 @@ export function main() {
           });
         }));
 
-        it("should support textarea", inject([AsyncTestCompleter], (async) => {
+        it("should support <select>", inject([AsyncTestCompleter], (async) => {
-          var ctx = new MyComp(new ControlGroup({"text": new Control('old')}));
-
-          var t = `<div [control-group]="form">
-                    <textarea control="text"></textarea>
-                  </div>`;
-
-          compile(MyComp, t, ctx, (view) => {
-            var textarea = queryView(view, "textarea")
-            expect(textarea.value).toEqual("old");
-
-            textarea.value = "new";
-            dispatchEvent(textarea, "change");
-
-            expect(ctx.form.value).toEqual({"text" : 'new'});
-            async.done();
-          });
-        }));
-
-        it("should support select", inject([AsyncTestCompleter], (async) => {
           var ctx = new MyComp(new ControlGroup({"city": new Control("SF")}));
 
           var t = `<div [control-group]="form">
@@ -284,7 +320,6 @@ export function main() {
           });
         }));
       });
-    }
 
       describe("nested forms", () => {
         it("should init DOM with the given form object", inject([AsyncTestCompleter], (async) => {
@@ -308,7 +343,6 @@ export function main() {
           });
         }));
 
-      if (DOM.supportsDOMEvents()) {
         it("should update the control group values on DOM change", inject([AsyncTestCompleter], (async) => {
           var form = new ControlGroup({
             "nested": new ControlGroup({
@@ -333,9 +367,9 @@ export function main() {
             async.done();
           });
         }));
+      });
+    });
   }
-    });
-  });
 }
 
 @Component({
@@ -358,11 +392,12 @@ class MyComp {
     'change' : 'handleOnChange($event.target.value)'
   }
 })
-class WrappedValue extends ControlValueAccessor {
+class WrappedValue {
   _setProperty:Function;
   onChange:Function;
 
   constructor(cd:ControlDirective, @PropertySetter('value') setProperty:Function) {
+    super();
     this._setProperty = setProperty;
     cd.valueAccessor = this;
   }