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,24 +72,24 @@ export function main() {
     });
   }
 
-  describe("integration tests", () => {
+  if (DOM.supportsDOMEvents()) {
-    it("should initialize DOM elements with the given form object", inject([AsyncTestCompleter], (async) => {
+    describe("integration tests", () => {
-      var ctx = new MyComp(new ControlGroup({
+      it("should initialize DOM elements with the given form object", inject([AsyncTestCompleter], (async) => {
-        "login": new Control("loginValue")
+        var ctx = new MyComp(new ControlGroup({
-      }));
+          "login": new Control("loginValue")
+        }));
 
-      var t = `<div [control-group]="form">
+        var t = `<div [control-group]="form">
                 <input type="text" control="login">
               </div>`;
 
-      compile(MyComp, t, ctx, (view) => {
+        compile(MyComp, t, ctx, (view) => {
-        var input = queryView(view, "input")
+          var input = queryView(view, "input")
-        expect(input.value).toEqual("loginValue");
+          expect(input.value).toEqual("loginValue");
-        async.done();
+          async.done();
-      });
+        });
-    }));
+      }));
 
-    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,55 +110,110 @@ export function main() {
           async.done();
         });
       }));
-    }
 
-    it("should update DOM elements when rebinding the control group", inject([AsyncTestCompleter], (async) => {
+      it("should update DOM elements when rebinding the control group", inject([AsyncTestCompleter], (async) => {
-      var form = new ControlGroup({
+        var form = new ControlGroup({
-        "login": new Control("oldValue")
+          "login": new Control("oldValue")
-      });
+        });
-      var ctx = new MyComp(form);
+        var ctx = new MyComp(form);
 
-      var t = `<div [control-group]="form">
+        var t = `<div [control-group]="form">
                 <input type="text" control="login">
               </div>`;
 
-      compile(MyComp, t, ctx, (view) => {
+        compile(MyComp, t, ctx, (view) => {
-        ctx.form = new ControlGroup({
+          ctx.form = new ControlGroup({
-          "login": new Control("newValue")
+            "login": new Control("newValue")
+          });
+          detectChanges(view);
+
+          var input = queryView(view, "input")
+          expect(input.value).toEqual("newValue");
+          async.done();
         });
-        detectChanges(view);
+      }));
 
-        var input = queryView(view, "input")
+      it("should update DOM element when rebinding the control name", inject([AsyncTestCompleter], (async) => {
-        expect(input.value).toEqual("newValue");
+        var ctx = new MyComp(new ControlGroup({
-        async.done();
+          "one": new Control("one"),
-      });
+          "two": new Control("two")
-    }));
+        }), "one");
 
-    it("should update DOM element when rebinding the control name", inject([AsyncTestCompleter], (async) => {
+        var t = `<div [control-group]="form">
-      var ctx = new MyComp(new ControlGroup({
-        "one": new Control("one"),
-        "two": new Control("two")
-      }), "one");
-
-      var t = `<div [control-group]="form">
                 <input type="text" [control]="name">
               </div>`;
 
-      compile(MyComp, t, ctx, (view) => {
+        compile(MyComp, t, ctx, (view) => {
-        var input = queryView(view, "input")
+          var input = queryView(view, "input")
-        expect(input.value).toEqual("one");
+          expect(input.value).toEqual("one");
 
-        ctx.name = "two";
+          ctx.name = "two";
-        detectChanges(view);
+          detectChanges(view);
 
-        expect(input.value).toEqual("two");
+          expect(input.value).toEqual("two");
-        async.done();
+          async.done();
-      });
+        });
-    }));
+      }));
 
-    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">
@@ -172,31 +227,12 @@ export function main() {
             input.checked = false;
             dispatchEvent(input, "change");
 
-            expect(ctx.form.value).toEqual({"checkbox" : false});
+            expect(ctx.form.value).toEqual({"checkbox": false});
             async.done();
           });
         }));
 
-        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">
@@ -215,7 +251,7 @@ export function main() {
             select.value = 'NYC';
             dispatchEvent(select, "change");
 
-            expect(ctx.form.value).toEqual({"city" : 'NYC'});
+            expect(ctx.form.value).toEqual({"city": 'NYC'});
             expect(sfOption.selected).toBe(false);
             async.done();
           });
@@ -235,7 +271,7 @@ export function main() {
             input.value = "!bb!";
             dispatchEvent(input, "change");
 
-            expect(ctx.form.value).toEqual({"name" : "bb"});
+            expect(ctx.form.value).toEqual({"name": "bb"});
             async.done();
           });
         }));
@@ -284,31 +320,29 @@ export function main() {
           });
         }));
       });
-    }
 
-    describe("nested forms", () => {
+      describe("nested forms", () => {
-      it("should init DOM with the given form object",inject([AsyncTestCompleter], (async) => {
+        it("should init DOM with the given form object", inject([AsyncTestCompleter], (async) => {
-        var form = new ControlGroup({
+          var form = new ControlGroup({
-          "nested": new ControlGroup({
+            "nested": new ControlGroup({
-            "login": new Control("value")
+              "login": new Control("value")
-          })
+            })
-        });
+          });
-        var ctx = new MyComp(form);
+          var ctx = new MyComp(form);
 
-        var t = `<div [control-group]="form">
+          var t = `<div [control-group]="form">
                     <div control-group="nested">
                       <input type="text" control="login">
                     </div>
                 </div>`;
 
-        compile(MyComp, t, ctx, (view) => {
+          compile(MyComp, t, ctx, (view) => {
-          var input = queryView(view, "input")
+            var input = queryView(view, "input")
-          expect(input.value).toEqual("value");
+            expect(input.value).toEqual("value");
-          async.done();
+            async.done();
-        });
+          });
-      }));
+        }));
 
-      if (DOM.supportsDOMEvents()) {
         it("should update the control group values on DOM change", inject([AsyncTestCompleter], (async) => {
           var form = new ControlGroup({
             "nested": new ControlGroup({
@@ -329,13 +363,13 @@ export function main() {
             input.value = "updatedValue";
             dispatchEvent(input, "change");
 
-            expect(form.value).toEqual({"nested" : {"login" : "updatedValue"}});
+            expect(form.value).toEqual({"nested": {"login": "updatedValue"}});
             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;
   }