diff --git a/modules/angular2/test/forms/directives_spec.js b/modules/angular2/test/forms/directives_spec.ts
similarity index 59%
rename from modules/angular2/test/forms/directives_spec.js
rename to modules/angular2/test/forms/directives_spec.ts
index 5e1dcf723b..3c9bb02c39 100644
--- a/modules/angular2/test/forms/directives_spec.js
+++ b/modules/angular2/test/forms/directives_spec.ts
@@ -1,5 +1,16 @@
-import {ddescribe, describe, it, iit, xit, expect, beforeEach, afterEach, el,
-  AsyncTestCompleter, inject} from 'angular2/test_lib';
+import {
+  ddescribe,
+  describe,
+  it,
+  iit,
+  xit,
+  expect,
+  beforeEach,
+  afterEach,
+  el,
+  AsyncTestCompleter,
+  inject
+} from 'angular2/test_lib';
 import {ControlGroup, ControlDirective, ControlGroupDirective} from 'angular2/forms';
 
 export function main() {
@@ -7,9 +18,8 @@ export function main() {
     describe("Control", () => {
       it("should throw when the group is not found and the control is not set", () => {
         var c = new ControlDirective(null);
-        expect(() => {
-          c.controlOrName = 'login';
-        }).toThrowError(new RegExp('No control group found for "login"'));
+        expect(() => { c.controlOrName = 'login'; })
+            .toThrowError(new RegExp('No control group found for "login"'));
       });
 
       it("should throw when cannot find the control in the group", () => {
@@ -17,9 +27,8 @@ export function main() {
         emptyGroup.controlOrName = new ControlGroup({});
 
         var c = new ControlDirective(emptyGroup);
-        expect(() => {
-          c.controlOrName = 'login';
-        }).toThrowError(new RegExp('Cannot find control "login"'));
+        expect(() => { c.controlOrName = 'login'; })
+            .toThrowError(new RegExp('Cannot find control "login"'));
       });
     });
   });
diff --git a/modules/angular2/test/forms/form_builder_spec.js b/modules/angular2/test/forms/form_builder_spec.ts
similarity index 61%
rename from modules/angular2/test/forms/form_builder_spec.js
rename to modules/angular2/test/forms/form_builder_spec.ts
index 538dc9eefb..02e33fbce8 100644
--- a/modules/angular2/test/forms/form_builder_spec.js
+++ b/modules/angular2/test/forms/form_builder_spec.ts
@@ -1,27 +1,30 @@
-import {ddescribe, describe, it, iit, xit, expect, beforeEach, afterEach, el} from 'angular2/test_lib';
+import {
+  ddescribe,
+  describe,
+  it,
+  iit,
+  xit,
+  expect,
+  beforeEach,
+  afterEach,
+  el
+} from 'angular2/test_lib';
 import {Control, FormBuilder, Validators} from 'angular2/forms';
 
 export function main() {
   describe("Form Builder", () => {
     var b;
 
-    beforeEach(() => {
-      b = new FormBuilder();
-    });
+    beforeEach(() => { b = new FormBuilder(); });
 
     it("should create controls from a value", () => {
-      var g = b.group({
-        "login": "some value"
-      });
+      var g = b.group({"login": "some value"});
 
       expect(g.controls["login"].value).toEqual("some value");
     });
 
     it("should create controls from an array", () => {
-      var g = b.group({
-        "login": ["some value"],
-        "password": ["some value", Validators.required]
-      });
+      var g = b.group({"login": ["some value"], "password": ["some value", Validators.required]});
 
       expect(g.controls["login"].value).toEqual("some value");
       expect(g.controls["password"].value).toEqual("some value");
@@ -29,49 +32,35 @@ export function main() {
     });
 
     it("should use controls", () => {
-      var g = b.group({
-        "login": b.control("some value", Validators.required)
-      });
+      var g = b.group({"login": b.control("some value", Validators.required)});
 
       expect(g.controls["login"].value).toEqual("some value");
       expect(g.controls["login"].validator).toBe(Validators.required);
     });
 
     it("should create groups with optional controls", () => {
-      var g = b.group({
-        "login": "some value"
-      }, {"optionals": {"login" : false}});
+      var g = b.group({"login": "some value"}, {"optionals": {"login": false}});
 
       expect(g.contains("login")).toEqual(false);
     });
 
     it("should create groups with a custom validator", () => {
-      var g = b.group({
-        "login": "some value"
-      }, {"validator": Validators.nullValidator});
+      var g = b.group({"login": "some value"}, {"validator": Validators.nullValidator});
 
       expect(g.validator).toBe(Validators.nullValidator);
     });
 
     it("should use default validators when no validators are provided", () => {
-      var g = b.group({
-        "login": "some value"
-      });
+      var g = b.group({"login": "some value"});
       expect(g.controls["login"].validator).toBe(Validators.nullValidator);
       expect(g.validator).toBe(Validators.group);
     });
 
     it("should create control arrays", () => {
       var c = b.control("three");
-      var a = b.array([
-        "one",
-        ["two", Validators.required],
-        c,
-        b.array(['four'])
-      ]);
+      var a = b.array(["one", ["two", Validators.required], c, b.array(['four'])]);
 
       expect(a.value).toEqual(['one', 'two', 'three', ['four']]);
     });
   });
 }
-
diff --git a/modules/angular2/test/forms/integration_spec.js b/modules/angular2/test/forms/integration_spec.js
deleted file mode 100644
index bfb7176b47..0000000000
--- a/modules/angular2/test/forms/integration_spec.js
+++ /dev/null
@@ -1,429 +0,0 @@
-import {
-  afterEach,
-  AsyncTestCompleter,
-  beforeEach,
-  ddescribe,
-  describe,
-  dispatchEvent,
-  el,
-  expect,
-  iit,
-  inject,
-  it,
-  xit
-} from 'angular2/test_lib';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {Inject} from 'angular2/src/di/annotations_impl';
-
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-import {TestBed} from 'angular2/src/test_lib/test_bed';
-
-import {ControlGroupDirective, ControlDirective, Control, ControlGroup, RequiredValidatorDirective, CheckboxControlValueAccessor, DefaultValueAccessor, SelectControlValueAccessor, Validators} from 'angular2/forms';
-
-export function main() {
-  describe("integration tests", () => {
-
-    it("should initialize DOM elements with the given form object",
-      inject([TestBed, AsyncTestCompleter], (tb, async) => {
-      var ctx = new MyComp(new ControlGroup({
-        "login": new Control("loginValue")
-      }));
-
-      var t = `<div [control-group]="form">
-              <input type="text" control="login">
-            </div>`;
-
-      tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-        view.detectChanges();
-        var input = view.querySelector("input");
-        expect(input.value).toEqual("loginValue");
-        async.done();
-      });
-    }));
-
-
-    it("should update the control group values on DOM change",
-      inject([TestBed, AsyncTestCompleter], (tb, async) => {
-      var form = new ControlGroup({
-        "login": new Control("oldValue")
-      });
-      var ctx = new MyComp(form);
-
-      var t = `<div [control-group]="form">
-                <input type="text" control="login">
-              </div>`;
-
-      tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-        view.detectChanges();
-        var input = view.querySelector("input");
-
-        input.value = "updatedValue";
-        dispatchEvent(input, "change");
-
-        expect(form.value).toEqual({"login": "updatedValue"});
-        async.done();
-      });
-    }));
-
-    it("should work with single controls", inject([TestBed, AsyncTestCompleter], (tb, async) => {
-      var control = new Control("loginValue");
-      var ctx = new MyComp(control);
-
-      var t = `<div><input type="text" [control]="form"></div>`;
-
-      tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-        view.detectChanges();
-        var input = view.querySelector("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([TestBed, AsyncTestCompleter], (tb, async) => {
-      var form = new ControlGroup({
-        "login": new Control("oldValue")
-      });
-      var ctx = new MyComp(form);
-
-      var t = `<div [control-group]="form">
-              <input type="text" control="login">
-            </div>`;
-
-      tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-        view.detectChanges();
-        ctx.form = new ControlGroup({
-          "login": new Control("newValue")
-        });
-        view.detectChanges();
-
-        var input = view.querySelector("input")
-        expect(input.value).toEqual("newValue");
-        async.done();
-      });
-    }));
-
-    it("should update DOM element when rebinding the control name",
-      inject([TestBed, AsyncTestCompleter], (tb, async) => {
-      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>`;
-
-      tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-        view.detectChanges();
-        var input = view.querySelector("input")
-        expect(input.value).toEqual("one");
-
-        ctx.name = "two";
-        view.detectChanges();
-
-        expect(input.value).toEqual("two");
-        async.done();
-      });
-    }));
-
-    describe("different control types", () => {
-      it("should support <input type=text>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
-        var ctx = new MyComp(new ControlGroup({"text": new Control("old")}));
-
-        var t = `<div [control-group]="form">
-                  <input type="text" control="text">
-                </div>`;
-
-        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-          view.detectChanges();
-          var input = view.querySelector("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([TestBed, AsyncTestCompleter], (tb, async) => {
-        var ctx = new MyComp(new ControlGroup({"text": new Control("old")}));
-
-        var t = `<div [control-group]="form">
-                  <input control="text">
-                </div>`;
-
-        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-          view.detectChanges();
-          var input = view.querySelector("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([TestBed, AsyncTestCompleter], (tb, async) => {
-        var ctx = new MyComp(new ControlGroup({"text": new Control('old')}));
-
-        var t = `<div [control-group]="form">
-                  <textarea control="text"></textarea>
-                </div>`;
-
-        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-          view.detectChanges();
-          var textarea = view.querySelector("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([TestBed, AsyncTestCompleter], (tb, async) => {
-        var ctx = new MyComp(new ControlGroup({"checkbox": new Control(true)}));
-
-        var t = `<div [control-group]="form">
-                  <input type="checkbox" control="checkbox">
-                </div>`;
-
-        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-          view.detectChanges();
-          var input = view.querySelector("input")
-          expect(input.checked).toBe(true);
-
-          input.checked = false;
-          dispatchEvent(input, "change");
-
-          expect(ctx.form.value).toEqual({"checkbox": false});
-          async.done();
-        });
-      }));
-
-      it("should support <select>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
-        var ctx = new MyComp(new ControlGroup({"city": new Control("SF")}));
-
-        var t = `<div [control-group]="form">
-                    <select control="city">
-                      <option value="SF"></option>
-                      <option value="NYC"></option>
-                    </select>
-                  </div>`;
-
-        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-          view.detectChanges();
-          var select = view.querySelector("select")
-          var sfOption = view.querySelector("option")
-          expect(select.value).toEqual('SF');
-          if (DOM.supportsDOMEvents()) {
-            expect(sfOption.selected).toBe(true);
-          }
-
-          select.value = 'NYC';
-          dispatchEvent(select, "change");
-
-          expect(ctx.form.value).toEqual({"city": 'NYC'});
-          if (DOM.supportsDOMEvents()) {
-            expect(sfOption.selected).toBe(false);
-          }
-          async.done();
-        });
-      }));
-
-      it("should support custom value accessors", inject([TestBed, AsyncTestCompleter], (tb, async) => {
-        var ctx = new MyComp(new ControlGroup({"name": new Control("aa")}));
-
-        var t = `<div [control-group]="form">
-                  <input type="text" control="name" wrapped-value>
-                </div>`;
-
-        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-          view.detectChanges();
-          var input = view.querySelector("input")
-          expect(input.value).toEqual("!aa!");
-
-          input.value = "!bb!";
-          dispatchEvent(input, "change");
-
-          expect(ctx.form.value).toEqual({"name": "bb"});
-          async.done();
-        });
-      }));
-
-      it("should throw when cannot find a value accessor", inject([TestBed, AsyncTestCompleter], (tb, async) => {
-        var ctx = new MyComp(new ControlGroup({"name": new Control("aa")}));
-
-        var t = `<div [control-group]="form">
-                  <div control="name">
-                </div>`;
-
-        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-          expect(() => view.detectChanges()).toThrowError(new RegExp("Cannot find value accessor"))
-          async.done();
-        });
-      }));
-    });
-
-    describe("validations", () => {
-      it("should use validators defined in html",
-        inject([TestBed, AsyncTestCompleter], (tb, async) => {
-        var form = new ControlGroup({"login": new Control("aa")});
-        var ctx = new MyComp(form);
-
-        var t = `<div [control-group]="form">
-                  <input type="text" control="login" required>
-                 </div>`;
-
-        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-          view.detectChanges();
-          expect(form.valid).toEqual(true);
-
-          var input = view.querySelector("input");
-
-          input.value = "";
-          dispatchEvent(input, "change");
-
-          expect(form.valid).toEqual(false);
-          async.done();
-        });
-      }));
-
-      it("should use validators defined in the model",
-        inject([TestBed, AsyncTestCompleter], (tb, async) => {
-        var form = new ControlGroup({"login": new Control("aa", Validators.required)});
-        var ctx = new MyComp(form);
-
-        var t = `<div [control-group]="form">
-                  <input type="text" control="login">
-                 </div>`;
-
-        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-          view.detectChanges();
-          expect(form.valid).toEqual(true);
-
-          var input = view.querySelector("input");
-
-          input.value = "";
-          dispatchEvent(input, "change");
-
-          expect(form.valid).toEqual(false);
-          async.done();
-        });
-      }));
-    });
-
-    describe("nested forms", () => {
-      it("should init DOM with the given form object",
-        inject([TestBed, AsyncTestCompleter], (tb, async) => {
-        var form = new ControlGroup({
-          "nested": new ControlGroup({
-            "login": new Control("value")
-          })
-        });
-        var ctx = new MyComp(form);
-
-        var t = `<div [control-group]="form">
-                  <div control-group="nested">
-                    <input type="text" control="login">
-                  </div>
-              </div>`;
-
-        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-          view.detectChanges();
-          var input = view.querySelector("input")
-          expect(input.value).toEqual("value");
-          async.done();
-        });
-      }));
-
-      it("should update the control group values on DOM change",
-        inject([TestBed, AsyncTestCompleter], (tb, async) => {
-        var form = new ControlGroup({
-          "nested": new ControlGroup({
-            "login": new Control("value")
-          })
-        });
-        var ctx = new MyComp(form);
-
-        var t = `<div [control-group]="form">
-                    <div control-group="nested">
-                      <input type="text" control="login">
-                    </div>
-                </div>`;
-
-        tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
-          view.detectChanges();
-          var input = view.querySelector("input")
-
-          input.value = "updatedValue";
-          dispatchEvent(input, "change");
-
-          expect(form.value).toEqual({"nested": {"login": "updatedValue"}});
-          async.done();
-        });
-      }));
-    });
-  });
-}
-
-@Component({selector: "my-comp"})
-@View({directives: [
-  ControlGroupDirective,
-  ControlDirective,
-  WrappedValue,
-  RequiredValidatorDirective,
-  DefaultValueAccessor,
-  CheckboxControlValueAccessor,
-  SelectControlValueAccessor
-]})
-class MyComp {
-  form:any;
-  name:string;
-
-  constructor(@Inject('form') form = null, @Inject('name') name = null) {
-    this.form = form;
-    this.name = name;
-  }
-}
-
-@Directive({
-  selector:'[wrapped-value]',
-  hostListeners: {
-    'change' : 'handleOnChange($event.target.value)'
-  },
-  hostProperties: {
-    'value' : 'value'
-  }
-})
-class WrappedValue {
-  value;
-  onChange:Function;
-
-  constructor(cd:ControlDirective) {
-    cd.valueAccessor = this;
-  }
-
-  writeValue(value) {
-    this.value = `!${value}!`;
-  }
-
-  handleOnChange(value) {
-    this.onChange(value.substring(1, value.length - 1));
-  }
-}
diff --git a/modules/angular2/test/forms/integration_spec.ts b/modules/angular2/test/forms/integration_spec.ts
new file mode 100644
index 0000000000..dca06040ad
--- /dev/null
+++ b/modules/angular2/test/forms/integration_spec.ts
@@ -0,0 +1,402 @@
+import {
+  afterEach,
+  AsyncTestCompleter,
+  beforeEach,
+  ddescribe,
+  describe,
+  dispatchEvent,
+  el,
+  expect,
+  iit,
+  inject,
+  it,
+  xit
+} from 'angular2/test_lib';
+import {DOM} from 'angular2/src/dom/dom_adapter';
+import {Component, Directive, View} from 'angular2/angular2';
+import {TestBed} from 'angular2/src/test_lib/test_bed';
+import {
+  Control,
+  ControlGroup,
+  ControlDirective,
+  RequiredValidatorDirective,
+  Validators,
+  formDirectives
+} from 'angular2/forms';
+
+export function main() {
+  describe("integration tests", () => {
+    it("should initialize DOM elements with the given form object",
+       inject([TestBed, AsyncTestCompleter], (tb, async) => {
+         var ctx = MyComp.create({form: new ControlGroup({"login": new Control("loginValue")})});
+
+         var t = `<div [control-group]="form">
+                <input type="text" control="login">
+               </div>`;
+
+         tb.createView(MyComp, {context: ctx, html: t})
+             .then((view) => {
+               view.detectChanges();
+               var input = view.querySelector("input");
+               expect(input.value).toEqual("loginValue");
+               async.done();
+             });
+       }));
+
+    it("should update the control group values on DOM change",
+       inject([TestBed, AsyncTestCompleter], (tb, async) => {
+         var form = new ControlGroup({"login": new Control("oldValue")});
+         var ctx = MyComp.create({form: form});
+
+         var t = `<div [control-group]="form">
+                <input type="text" control="login">
+              </div>`;
+
+         tb.createView(MyComp, {context: ctx, html: t})
+             .then((view) => {
+               view.detectChanges();
+               var input = view.querySelector("input");
+
+               input.value = "updatedValue";
+               dispatchEvent(input, "change");
+
+               expect(form.value).toEqual({"login": "updatedValue"});
+               async.done();
+             });
+       }));
+
+    it("should work with single controls", inject([TestBed, AsyncTestCompleter], (tb, async) => {
+         var control = new Control("loginValue");
+         var ctx = MyComp.create({form: control});
+
+         var t = `<div><input type="text" [control]="form"></div>`;
+
+         tb.createView(MyComp, {context: ctx, html: t})
+             .then((view) => {
+               view.detectChanges();
+               var input = view.querySelector("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([TestBed, AsyncTestCompleter], (tb, async) => {
+         var form = new ControlGroup({"login": new Control("oldValue")});
+         var ctx = MyComp.create({form: form});
+
+         var t = `<div [control-group]="form">
+              <input type="text" control="login">
+            </div>`;
+
+         tb.createView(MyComp, {context: ctx, html: t})
+             .then((view) => {
+               view.detectChanges();
+               ctx.form = new ControlGroup({"login": new Control("newValue")});
+               view.detectChanges();
+
+               var input = view.querySelector("input");
+               expect(input.value).toEqual("newValue");
+               async.done();
+             });
+       }));
+
+    it("should update DOM element when rebinding the control name",
+       inject([TestBed, AsyncTestCompleter], (tb, async) => {
+         var ctx = MyComp.create({
+           form: new ControlGroup({"one": new Control("one"), "two": new Control("two")}),
+           name: "one"
+         });
+
+         var t = `<div [control-group]="form">
+              <input type="text" [control]="name">
+            </div>`;
+
+         tb.createView(MyComp, {context: ctx, html: t})
+             .then((view) => {
+               view.detectChanges();
+               var input = view.querySelector("input");
+               expect(input.value).toEqual("one");
+
+               ctx.name = "two";
+               view.detectChanges();
+
+               expect(input.value).toEqual("two");
+               async.done();
+             });
+       }));
+
+    describe("different control types", () => {
+      it("should support <input type=text>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
+           var ctx = MyComp.create({form: new ControlGroup({"text": new Control("old")})});
+
+           var t = `<div [control-group]="form">
+                  <input type="text" control="text">
+                </div>`;
+
+           tb.createView(MyComp, {context: ctx, html: t})
+               .then((view) => {
+                 view.detectChanges();
+                 var input = view.querySelector("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([TestBed, AsyncTestCompleter], (tb, async) => {
+           var ctx = MyComp.create({form: new ControlGroup({"text": new Control("old")})});
+
+           var t = `<div [control-group]="form">
+                  <input control="text">
+                </div>`;
+
+           tb.createView(MyComp, {context: ctx, html: t})
+               .then((view) => {
+                 view.detectChanges();
+                 var input = view.querySelector("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([TestBed, AsyncTestCompleter], (tb, async) => {
+           var ctx = MyComp.create({form: new ControlGroup({"text": new Control('old')})});
+
+           var t = `<div [control-group]="form">
+                  <textarea control="text"></textarea>
+                </div>`;
+
+           tb.createView(MyComp, {context: ctx, html: t})
+               .then((view) => {
+                 view.detectChanges();
+                 var textarea = view.querySelector("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([TestBed, AsyncTestCompleter], (tb, async) => {
+           var ctx = MyComp.create({form: new ControlGroup({"checkbox": new Control(true)})});
+
+           var t = `<div [control-group]="form">
+                  <input type="checkbox" control="checkbox">
+                </div>`;
+
+           tb.createView(MyComp, {context: ctx, html: t})
+               .then((view) => {
+                 view.detectChanges();
+                 var input = view.querySelector("input");
+                 expect(input.checked).toBe(true);
+
+                 input.checked = false;
+                 dispatchEvent(input, "change");
+
+                 expect(ctx.form.value).toEqual({"checkbox": false});
+                 async.done();
+               });
+         }));
+
+      it("should support <select>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
+           var ctx = MyComp.create({form: new ControlGroup({"city": new Control("SF")})});
+
+           var t = `<div [control-group]="form">
+                    <select control="city">
+                      <option value="SF"></option>
+                      <option value="NYC"></option>
+                    </select>
+                  </div>`;
+
+           tb.createView(MyComp, {context: ctx, html: t})
+               .then((view) => {
+                 view.detectChanges();
+                 var select = view.querySelector("select");
+                 var sfOption = view.querySelector("option");
+                 expect(select.value).toEqual('SF');
+                 if (DOM.supportsDOMEvents()) {
+                   expect(sfOption.selected).toBe(true);
+                 }
+
+                 select.value = 'NYC';
+                 dispatchEvent(select, "change");
+
+                 expect(ctx.form.value).toEqual({"city": 'NYC'});
+                 if (DOM.supportsDOMEvents()) {
+                   expect(sfOption.selected).toBe(false);
+                 }
+                 async.done();
+               });
+         }));
+
+      it("should support custom value accessors",
+         inject([TestBed, AsyncTestCompleter], (tb, async) => {
+           var ctx = MyComp.create({form: new ControlGroup({"name": new Control("aa")})});
+
+           var t = `<div [control-group]="form">
+                  <input type="text" control="name" wrapped-value>
+                </div>`;
+
+           tb.createView(MyComp, {context: ctx, html: t})
+               .then((view) => {
+                 view.detectChanges();
+                 var input = view.querySelector("input");
+                 expect(input.value).toEqual("!aa!");
+
+                 input.value = "!bb!";
+                 dispatchEvent(input, "change");
+
+                 expect(ctx.form.value).toEqual({"name": "bb"});
+                 async.done();
+               });
+         }));
+    });
+
+    describe("validations", () => {
+      it("should use validators defined in html",
+         inject([TestBed, AsyncTestCompleter], (tb, async) => {
+           var form = new ControlGroup({"login": new Control("aa")});
+           var ctx = MyComp.create({form: form});
+
+           var t = `<div [control-group]="form">
+                  <input type="text" control="login" required>
+                 </div>`;
+
+           tb.createView(MyComp, {context: ctx, html: t})
+               .then((view) => {
+                 view.detectChanges();
+                 expect(form.valid).toEqual(true);
+
+                 var input = view.querySelector("input");
+
+                 input.value = "";
+                 dispatchEvent(input, "change");
+
+                 expect(form.valid).toEqual(false);
+                 async.done();
+               });
+         }));
+
+      it("should use validators defined in the model",
+         inject([TestBed, AsyncTestCompleter], (tb, async) => {
+           var form = new ControlGroup({"login": new Control("aa", Validators.required)});
+           var ctx = MyComp.create({form: form});
+
+           var t = `<div [control-group]="form">
+                  <input type="text" control="login">
+                 </div>`;
+
+           tb.createView(MyComp, {context: ctx, html: t})
+               .then((view) => {
+                 view.detectChanges();
+                 expect(form.valid).toEqual(true);
+
+                 var input = view.querySelector("input");
+
+                 input.value = "";
+                 dispatchEvent(input, "change");
+
+                 expect(form.valid).toEqual(false);
+                 async.done();
+               });
+         }));
+    });
+
+    describe("nested forms", () => {
+      it("should init DOM with the given form object",
+         inject([TestBed, AsyncTestCompleter], (tb, async) => {
+           var form =
+               new ControlGroup({"nested": new ControlGroup({"login": new Control("value")})});
+           var ctx = MyComp.create({form: form});
+
+           var t = `<div [control-group]="form">
+                  <div control-group="nested">
+                    <input type="text" control="login">
+                  </div>
+              </div>`;
+
+           tb.createView(MyComp, {context: ctx, html: t})
+               .then((view) => {
+                 view.detectChanges();
+                 var input = view.querySelector("input");
+                 expect(input.value).toEqual("value");
+                 async.done();
+               });
+         }));
+
+      it("should update the control group values on DOM change",
+         inject([TestBed, AsyncTestCompleter], (tb, async) => {
+           var form =
+               new ControlGroup({"nested": new ControlGroup({"login": new Control("value")})});
+           var ctx = MyComp.create({form: form});
+
+           var t = `<div [control-group]="form">
+                    <div control-group="nested">
+                      <input type="text" control="login">
+                    </div>
+                </div>`;
+
+           tb.createView(MyComp, {context: ctx, html: t})
+               .then((view) => {
+                 view.detectChanges();
+                 var input = view.querySelector("input")
+
+                                 input.value = "updatedValue";
+                 dispatchEvent(input, "change");
+
+                 expect(form.value).toEqual({"nested": {"login": "updatedValue"}});
+                 async.done();
+               });
+         }));
+    });
+  });
+}
+
+@Directive({
+  selector: '[wrapped-value]',
+  hostListeners: {'change': 'handleOnChange($event.target.value)'},
+  hostProperties: {'value': 'value'}
+})
+class WrappedValue {
+  value;
+  onChange: Function;
+
+  constructor(cd: ControlDirective) { cd.valueAccessor = this; }
+
+  writeValue(value) { this.value = `!${value}!`; }
+
+  handleOnChange(value) { this.onChange(value.substring(1, value.length - 1)); }
+}
+
+@Component({selector: "my-comp"})
+@View({directives: [WrappedValue, formDirectives, RequiredValidatorDirective]})
+class MyComp {
+  form: any;
+  name: string;
+
+  static create({form, name}: {form?, name?}) {
+    var mc = new MyComp();
+    mc.form = form;
+    mc.name = name;
+    return mc;
+  }
+}
\ No newline at end of file
diff --git a/modules/angular2/test/forms/model_spec.js b/modules/angular2/test/forms/model_spec.ts
similarity index 55%
rename from modules/angular2/test/forms/model_spec.js
rename to modules/angular2/test/forms/model_spec.ts
index d3155fb947..7c44fa0aa8 100644
--- a/modules/angular2/test/forms/model_spec.js
+++ b/modules/angular2/test/forms/model_spec.ts
@@ -1,5 +1,16 @@
-import {ddescribe, describe, it, iit, xit, expect, beforeEach, afterEach, el,
-  AsyncTestCompleter, inject} from 'angular2/test_lib';
+import {
+  ddescribe,
+  describe,
+  it,
+  iit,
+  xit,
+  expect,
+  beforeEach,
+  afterEach,
+  el,
+  AsyncTestCompleter,
+  inject
+} from 'angular2/test_lib';
 import {ControlGroup, Control, ControlArray, Validators} from 'angular2/forms';
 import {ObservableWrapper} from 'angular2/src/facade/async';
 import {ListWrapper} from 'angular2/src/facade/collection';
@@ -21,7 +32,7 @@ export function main() {
 
         it("should return errors", () => {
           var c = new Control(null, Validators.required);
-          expect(c.errors).toEqual({"required" : true});
+          expect(c.errors).toEqual({"required": true});
         });
       });
 
@@ -54,37 +65,33 @@ export function main() {
       describe("valueChanges", () => {
         var c;
 
-        beforeEach(() => {
-          c = new Control("old");
-        });
+        beforeEach(() => { c = new Control("old"); });
 
-        it("should fire an event after the value has been updated",  inject([AsyncTestCompleter], (async) => {
-          ObservableWrapper.subscribe(c.valueChanges, (value) => {
-            expect(c.value).toEqual('new');
-            expect(value).toEqual('new');
-            async.done();
-          });
-          c.updateValue("new");
-        }));
+        it("should fire an event after the value has been updated",
+           inject([AsyncTestCompleter], (async) => {
+             ObservableWrapper.subscribe(c.valueChanges, (value) => {
+               expect(c.value).toEqual('new');
+               expect(value).toEqual('new');
+               async.done();
+             });
+             c.updateValue("new");
+           }));
 
-        it("should return a cold observable",  inject([AsyncTestCompleter], (async) => {
-          c.updateValue("will be ignored");
-          ObservableWrapper.subscribe(c.valueChanges, (value) => {
-            expect(value).toEqual('new');
-            async.done();
-          });
-          c.updateValue("new");
-        }));
+        it("should return a cold observable", inject([AsyncTestCompleter], (async) => {
+             c.updateValue("will be ignored");
+             ObservableWrapper.subscribe(c.valueChanges, (value) => {
+               expect(value).toEqual('new');
+               async.done();
+             });
+             c.updateValue("new");
+           }));
       });
     });
 
     describe("ControlGroup", () => {
       describe("value", () => {
         it("should be the reduced value of the child controls", () => {
-          var g = new ControlGroup({
-            "one": new Control("111"),
-            "two": new Control("222")
-          });
+          var g = new ControlGroup({"one": new Control("111"), "two": new Control("222")});
           expect(g.value).toEqual({"one": "111", "two": "222"});
         });
 
@@ -96,23 +103,19 @@ export function main() {
         it("should support nested groups", () => {
           var g = new ControlGroup({
             "one": new Control("111"),
-            "nested": new ControlGroup({
-              "two" : new Control("222")
-            })
+            "nested": new ControlGroup({"two": new Control("222")})
           });
-          expect(g.value).toEqual({"one": "111", "nested" : {"two": "222"}});
+          expect(g.value).toEqual({"one": "111", "nested": {"two": "222"}});
 
           g.controls["nested"].controls["two"].updateValue("333");
 
-          expect(g.value).toEqual({"one": "111", "nested" : {"two": "333"}});
+          expect(g.value).toEqual({"one": "111", "nested": {"two": "333"}});
         });
       });
 
       describe("validator", () => {
         it("should run the validator with the initial value (valid)", () => {
-          var g = new ControlGroup({
-            "one": new Control('value', Validators.required)
-          });
+          var g = new ControlGroup({"one": new Control('value', Validators.required)});
 
           expect(g.valid).toEqual(true);
 
@@ -161,22 +164,20 @@ export function main() {
           var group;
 
           beforeEach(() => {
-            group = new ControlGroup({
-              "required": new Control("requiredValue"),
-              "optional": new Control("optionalValue")
-            }, {
-              "optional": false
-            });
+            group = new ControlGroup(
+                {
+                  "required": new Control("requiredValue"),
+                  "optional": new Control("optionalValue")
+                },
+                {"optional": false});
           });
 
           // rename contains into has
-          it("should return false when the component is not included", () => {
-            expect(group.contains("optional")).toEqual(false);
-          })
+          it("should return false when the component is not included",
+             () => { expect(group.contains("optional")).toEqual(false); })
 
-          it("should return false when there is no component with the given name", () => {
-            expect(group.contains("something else")).toEqual(false);
-          });
+              it("should return false when there is no component with the given name",
+                 () => { expect(group.contains("something else")).toEqual(false); });
 
           it("should return true when the component is included", () => {
             expect(group.contains("required")).toEqual(true);
@@ -188,27 +189,24 @@ export function main() {
         });
 
         it("should not include an inactive component into the group value", () => {
-          var group = new ControlGroup({
-            "required": new Control("requiredValue"),
-            "optional": new Control("optionalValue")
-          }, {
-            "optional": false
-          });
+          var group = new ControlGroup(
+              {"required": new Control("requiredValue"), "optional": new Control("optionalValue")},
+              {"optional": false});
 
-          expect(group.value).toEqual({"required" : "requiredValue"});
+          expect(group.value).toEqual({"required": "requiredValue"});
 
           group.include("optional");
 
-          expect(group.value).toEqual({"required" : "requiredValue", "optional" : "optionalValue"});
+          expect(group.value).toEqual({"required": "requiredValue", "optional": "optionalValue"});
         });
 
         it("should not run Validators on an inactive component", () => {
-          var group = new ControlGroup({
-            "required": new Control("requiredValue", Validators.required),
-            "optional": new Control("", Validators.required)
-          }, {
-            "optional": false
-          });
+          var group = new ControlGroup(
+              {
+                "required": new Control("requiredValue", Validators.required),
+                "optional": new Control("", Validators.required)
+              },
+              {"optional": false});
 
           expect(group.valid).toEqual(true);
 
@@ -222,80 +220,79 @@ export function main() {
 
           beforeEach(() => {
             c1 = new Control("old1");
-            c2 = new Control("old2")
-            g = new ControlGroup({
-              "one" : c1, "two" : c2
-            }, {
-              "two" : true
-            });
+            c2 = new Control("old2");
+            g = new ControlGroup({"one": c1, "two": c2}, {"two": true});
           });
 
-          it("should fire an event after the value has been updated", inject([AsyncTestCompleter], (async) => {
-            ObservableWrapper.subscribe(g.valueChanges, (value) => {
-              expect(g.value).toEqual({'one' : 'new1', 'two' : 'old2'});
-              expect(value).toEqual({'one' : 'new1', 'two' : 'old2'});
-              async.done();
-            });
-            c1.updateValue("new1");
-          }));
+          it("should fire an event after the value has been updated",
+             inject([AsyncTestCompleter], (async) => {
+               ObservableWrapper.subscribe(g.valueChanges, (value) => {
+                 expect(g.value).toEqual({'one': 'new1', 'two': 'old2'});
+                 expect(value).toEqual({'one': 'new1', 'two': 'old2'});
+                 async.done();
+               });
+               c1.updateValue("new1");
+             }));
 
-          it("should fire an event after the control's observable fired an event", inject([AsyncTestCompleter], (async) => {
-            var controlCallbackIsCalled = false;
+          it("should fire an event after the control's observable fired an event",
+             inject([AsyncTestCompleter], (async) => {
+               var controlCallbackIsCalled = false;
 
-            ObservableWrapper.subscribe(c1.valueChanges, (value) => {
-              controlCallbackIsCalled = true;
-            });
+               ObservableWrapper.subscribe(c1.valueChanges,
+                                           (value) => { controlCallbackIsCalled = true; });
 
-            ObservableWrapper.subscribe(g.valueChanges, (value) => {
-              expect(controlCallbackIsCalled).toBe(true);
-              async.done();
-            });
+               ObservableWrapper.subscribe(g.valueChanges, (value) => {
+                 expect(controlCallbackIsCalled).toBe(true);
+                 async.done();
+               });
 
-            c1.updateValue("new1");
-          }));
+               c1.updateValue("new1");
+             }));
 
-          it("should fire an event when a control is excluded", inject([AsyncTestCompleter], (async) => {
-            ObservableWrapper.subscribe(g.valueChanges, (value) => {
-              expect(value).toEqual({'one' : 'old1'});
-              async.done();
-            });
+          it("should fire an event when a control is excluded",
+             inject([AsyncTestCompleter], (async) => {
+               ObservableWrapper.subscribe(g.valueChanges, (value) => {
+                 expect(value).toEqual({'one': 'old1'});
+                 async.done();
+               });
 
-            g.exclude("two");
-          }));
+               g.exclude("two");
+             }));
 
-          it("should fire an event when a control is included", inject([AsyncTestCompleter], (async) => {
-            g.exclude("two");
+          it("should fire an event when a control is included",
+             inject([AsyncTestCompleter], (async) => {
+               g.exclude("two");
 
-            ObservableWrapper.subscribe(g.valueChanges, (value) => {
-              expect(value).toEqual({'one' : 'old1', 'two' : 'old2'});
-              async.done();
-            });
+               ObservableWrapper.subscribe(g.valueChanges, (value) => {
+                 expect(value).toEqual({'one': 'old1', 'two': 'old2'});
+                 async.done();
+               });
 
-            g.include("two");
-          }));
+               g.include("two");
+             }));
 
-          it("should fire an event every time a control is updated", inject([AsyncTestCompleter], (async) => {
-            var loggedValues = [];
+          it("should fire an event every time a control is updated",
+             inject([AsyncTestCompleter], (async) => {
+               var loggedValues = [];
 
-            ObservableWrapper.subscribe(g.valueChanges, (value) => {
-              ListWrapper.push(loggedValues, value);
+               ObservableWrapper.subscribe(g.valueChanges, (value) => {
+                 ListWrapper.push(loggedValues, value);
 
-              if (loggedValues.length == 2) {
-                expect(loggedValues).toEqual([
-                  {"one" : "new1", "two" : "old2"},
-                  {"one" : "new1", "two" : "new2"}
-                ])
-                async.done();
-              }
-            });
+                 if (loggedValues.length == 2) {
+                   expect(loggedValues)
+                       .toEqual([{"one": "new1", "two": "old2"}, {"one": "new1", "two": "new2"}])
+                           async.done();
+                 }
+               });
 
-            c1.updateValue("new1");
-            c2.updateValue("new2");
-          }));
+               c1.updateValue("new1");
+               c2.updateValue("new2");
+             }));
 
-          xit("should not fire an event when an excluded control is updated", inject([AsyncTestCompleter], (async) => {
-            // hard to test without hacking zones
-          }));
+          xit("should not fire an event when an excluded control is updated",
+              inject([AsyncTestCompleter], (async) => {
+                                               // hard to test without hacking zones
+                                           }));
         });
       });
 
@@ -351,10 +348,8 @@ export function main() {
 
         describe("validator", () => {
           it("should run the validator with the initial value (valid)", () => {
-            var a = new ControlArray([
-              new Control(1, Validators.required),
-              new Control(2, Validators.required)
-            ]);
+            var a = new ControlArray(
+                [new Control(1, Validators.required), new Control(2, Validators.required)]);
 
             expect(a.valid).toBe(true);
             expect(a.errors).toBe(null);
@@ -405,53 +400,56 @@ export function main() {
 
           beforeEach(() => {
             c1 = new Control("old1");
-            c2 = new Control("old2")
+            c2 = new Control("old2");
             a = new ControlArray([c1, c2]);
           });
 
-          it("should fire an event after the value has been updated", inject([AsyncTestCompleter], (async) => {
-            ObservableWrapper.subscribe(a.valueChanges, (value) => {
-              expect(a.value).toEqual(['new1', 'old2']);
-              expect(value).toEqual(['new1', 'old2']);
-              async.done();
-            });
-            c1.updateValue("new1");
-          }));
+          it("should fire an event after the value has been updated",
+             inject([AsyncTestCompleter], (async) => {
+               ObservableWrapper.subscribe(a.valueChanges, (value) => {
+                 expect(a.value).toEqual(['new1', 'old2']);
+                 expect(value).toEqual(['new1', 'old2']);
+                 async.done();
+               });
+               c1.updateValue("new1");
+             }));
 
-          it("should fire an event after the control's observable fired an event", inject([AsyncTestCompleter], (async) => {
-            var controlCallbackIsCalled = false;
+          it("should fire an event after the control's observable fired an event",
+             inject([AsyncTestCompleter], (async) => {
+               var controlCallbackIsCalled = false;
 
-            ObservableWrapper.subscribe(c1.valueChanges, (value) => {
-              controlCallbackIsCalled = true;
-            });
+               ObservableWrapper.subscribe(c1.valueChanges,
+                                           (value) => { controlCallbackIsCalled = true; });
 
-            ObservableWrapper.subscribe(a.valueChanges, (value) => {
-              expect(controlCallbackIsCalled).toBe(true);
-              async.done();
-            });
+               ObservableWrapper.subscribe(a.valueChanges, (value) => {
+                 expect(controlCallbackIsCalled).toBe(true);
+                 async.done();
+               });
 
-            c1.updateValue("new1");
-          }));
+               c1.updateValue("new1");
+             }));
 
-          it("should fire an event when a control is removed", inject([AsyncTestCompleter], (async) => {
-            ObservableWrapper.subscribe(a.valueChanges, (value) => {
-              expect(value).toEqual(['old1']);
-              async.done();
-            });
+          it("should fire an event when a control is removed",
+             inject([AsyncTestCompleter], (async) => {
+               ObservableWrapper.subscribe(a.valueChanges, (value) => {
+                 expect(value).toEqual(['old1']);
+                 async.done();
+               });
 
-            a.removeAt(1);
-          }));
+               a.removeAt(1);
+             }));
 
-          it("should fire an event when a control is added", inject([AsyncTestCompleter], (async) => {
-            a.removeAt(1);
+          it("should fire an event when a control is added",
+             inject([AsyncTestCompleter], (async) => {
+               a.removeAt(1);
 
-            ObservableWrapper.subscribe(a.valueChanges, (value) => {
-              expect(value).toEqual(['old1', 'old2']);
-              async.done();
-            });
+               ObservableWrapper.subscribe(a.valueChanges, (value) => {
+                 expect(value).toEqual(['old1', 'old2']);
+                 async.done();
+               });
 
-            a.push(c2);
-          }));
+               a.push(c2);
+             }));
         });
       });
     });
diff --git a/modules/angular2/test/forms/validators_spec.js b/modules/angular2/test/forms/validators_spec.ts
similarity index 54%
rename from modules/angular2/test/forms/validators_spec.js
rename to modules/angular2/test/forms/validators_spec.ts
index 8293093424..8fbb807691 100644
--- a/modules/angular2/test/forms/validators_spec.js
+++ b/modules/angular2/test/forms/validators_spec.ts
@@ -1,9 +1,19 @@
-import {ddescribe, describe, it, iit, xit, expect, beforeEach, afterEach, el} from 'angular2/test_lib';
+import {
+  ddescribe,
+  describe,
+  it,
+  iit,
+  xit,
+  expect,
+  beforeEach,
+  afterEach,
+  el
+} from 'angular2/test_lib';
 import {ControlGroup, Control, Validators} from 'angular2/forms';
 
 export function main() {
-  function validator(key:string, error:any){
-    return function(c:Control) {
+  function validator(key: string, error: any) {
+    return function(c: Control) {
       var r = {};
       r[key] = error;
       return r;
@@ -12,28 +22,25 @@ export function main() {
 
   describe("Validators", () => {
     describe("required", () => {
-      it("should error on an empty string", () => {
-        expect(Validators.required(new Control(""))).toEqual({"required" : true});
-      });
+      it("should error on an empty string",
+         () => { expect(Validators.required(new Control(""))).toEqual({"required": true}); });
 
-      it("should error on null", () => {
-        expect(Validators.required(new Control(null))).toEqual({"required" : true});
-      });
+      it("should error on null",
+         () => { expect(Validators.required(new Control(null))).toEqual({"required": true}); });
 
-      it("should not error on a non-empty string", () => {
-        expect(Validators.required(new Control("not empty"))).toEqual(null);
-      });
+      it("should not error on a non-empty string",
+         () => { expect(Validators.required(new Control("not empty"))).toEqual(null); });
     });
 
     describe("compose", () => {
       it("should collect errors from all the validators", () => {
         var c = Validators.compose([validator("a", true), validator("b", true)]);
-        expect(c(new Control(""))).toEqual({"a" : true, "b" : true});
+        expect(c(new Control(""))).toEqual({"a": true, "b": true});
       });
 
       it("should run validators left to right", () => {
         var c = Validators.compose([validator("a", 1), validator("a", 2)]);
-        expect(c(new Control(""))).toEqual({"a" : 2});
+        expect(c(new Control(""))).toEqual({"a": 2});
       });
 
       it("should return null when no errors", () => {
@@ -46,28 +53,21 @@ export function main() {
       it("should collect errors from the child controls", () => {
         var one = new Control("one", validator("a", true));
         var two = new Control("one", validator("b", true));
-        var g = new ControlGroup({"one" : one, "two" : two});
+        var g = new ControlGroup({"one": one, "two": two});
 
-        expect(Validators.group(g)).toEqual({
-          "a" : [one],
-          "b" : [two]
-        });
+        expect(Validators.group(g)).toEqual({"a": [one], "b": [two]});
       });
 
       it("should not include controls that have no errors", () => {
         var one = new Control("one", validator("a", true));
         var two = new Control("two");
-        var g = new ControlGroup({"one" : one, "two" : two});
+        var g = new ControlGroup({"one": one, "two": two});
 
-        expect(Validators.group(g)).toEqual({
-          "a": [one]
-        });
+        expect(Validators.group(g)).toEqual({"a": [one]});
       });
 
       it("should return null when no errors", () => {
-        var g = new ControlGroup({
-          "one" : new Control("one")
-        });
+        var g = new ControlGroup({"one": new Control("one")});
 
         expect(Validators.group(g)).toEqual(null);
       });