feat(forms): added support for status classes

modules/angular2/test/forms/directives_spec.ts

@@ -172,7 +172,7 @@ export function main() {
         controlDir.valueAccessor = new DummyControlValueAccessor();
 
         control = new Control(null);
-        controlDir.control = control;
+        controlDir.form = control;
       });
 
       it("should set up validator", () => {

modules/angular2/test/forms/integration_spec.ts

@@ -17,6 +17,7 @@ import {
   xit
 } from 'angular2/test_lib';
 
+import {DOM} from 'angular2/src/dom/dom_adapter';
 import {TestBed} from 'angular2/src/test_lib/test_bed';
 import {NgIf} from 'angular2/directives';
 
@@ -561,6 +562,7 @@ export function main() {
                       .then((view) => {
                         view.detectChanges();
                         tick();
+                        view.detectChanges();
 
                         var input = view.querySelector("input");
                         expect(input.value).toEqual("oldValue");
@@ -599,6 +601,105 @@ export function main() {
                   flushMicrotasks();
                 })));
     });
+
+
+    describe("setting status classes", () => {
+      it("should work with single fields",
+         inject([TestBed], fakeAsync(tb => {
+                  var form = new Control("", Validators.required);
+                  var ctx = MyComp.create({form: form});
+
+                  var t = `<div><input type="text" [ng-form-control]="form"></div>`;
+
+                  tb.createView(MyComp, {context: ctx, html: t})
+                      .then((view) => {
+                        view.detectChanges();
+
+                        var input = view.querySelector("input");
+                        expect(DOM.classList(input))
+                            .toEqual(["ng-binding", "ng-untouched", "ng-pristine", "ng-invalid"]);
+
+                        dispatchEvent(input, "blur");
+                        view.detectChanges();
+
+                        expect(DOM.classList(input))
+                            .toEqual(["ng-binding", "ng-pristine", "ng-invalid", "ng-touched"]);
+
+                        input.value = "updatedValue";
+                        dispatchEvent(input, "change");
+                        view.detectChanges();
+
+                        expect(DOM.classList(input))
+                            .toEqual(["ng-binding", "ng-touched", "ng-dirty", "ng-valid"]);
+                        tick();
+                      });
+                  flushMicrotasks();
+                })));
+
+      it("should work with complex model-driven forms",
+         inject([TestBed], fakeAsync(tb => {
+                  var form = new ControlGroup({"name": new Control("", Validators.required)});
+                  var ctx = MyComp.create({form: form});
+
+                  var t =
+                      `<form [ng-form-model]="form"><input type="text" ng-control="name"></form>`;
+
+                  tb.createView(MyComp, {context: ctx, html: t})
+                      .then((view) => {
+                        view.detectChanges();
+
+                        var input = view.querySelector("input");
+                        expect(DOM.classList(input))
+                            .toEqual(["ng-binding", "ng-untouched", "ng-pristine", "ng-invalid"]);
+
+                        dispatchEvent(input, "blur");
+                        view.detectChanges();
+
+                        expect(DOM.classList(input))
+                            .toEqual(["ng-binding", "ng-pristine", "ng-invalid", "ng-touched"]);
+
+                        input.value = "updatedValue";
+                        dispatchEvent(input, "change");
+                        view.detectChanges();
+
+                        expect(DOM.classList(input))
+                            .toEqual(["ng-binding", "ng-touched", "ng-dirty", "ng-valid"]);
+                        tick();
+                      });
+                  flushMicrotasks();
+                })));
+
+      it("should work with ng-model",
+         inject([TestBed], fakeAsync(tb => {
+                  var ctx = MyComp.create({name: ""});
+
+                  var t = `<div><input [(ng-model)]="name" required></div>`;
+
+                  tb.createView(MyComp, {context: ctx, html: t})
+                      .then((view) => {
+                        view.detectChanges();
+
+                        var input = view.querySelector("input");
+                        expect(DOM.classList(input))
+                            .toEqual(["ng-binding", "ng-untouched", "ng-pristine", "ng-invalid"]);
+
+                        dispatchEvent(input, "blur");
+                        view.detectChanges();
+
+                        expect(DOM.classList(input))
+                            .toEqual(["ng-binding", "ng-pristine", "ng-invalid", "ng-touched"]);
+
+                        input.value = "updatedValue";
+                        dispatchEvent(input, "change");
+                        view.detectChanges();
+
+                        expect(DOM.classList(input))
+                            .toEqual(["ng-binding", "ng-touched", "ng-dirty", "ng-valid"]);
+                        tick();
+                      });
+                  flushMicrotasks();
+                })));
+    });
   });
 }
 

modules/angular2/test/forms/model_spec.ts

@@ -203,16 +203,14 @@ export function main() {
       });
 
       describe("dirty", () => {
-        var c,g;
+        var c, g;
 
         beforeEach(() => {
           c = new Control('value');
           g = new ControlGroup({"one": c});
         });
 
-        it("should be false after creating a control", () => {
-          expect(g.dirty).toEqual(false);
-        });
+        it("should be false after creating a control", () => { expect(g.dirty).toEqual(false); });
 
         it("should be false after changing the value of the control", () => {
           c.markAsDirty();
@@ -442,16 +440,14 @@ export function main() {
         });
 
         describe("dirty", () => {
-          var c,a;
+          var c, a;
 
           beforeEach(() => {
             c = new Control('value');
             a = new ControlArray([c]);
           });
 
-          it("should be false after creating a control", () => {
-            expect(a.dirty).toEqual(false);
-          });
+          it("should be false after creating a control", () => { expect(a.dirty).toEqual(false); });
 
           it("should be false after changing the value of the control", () => {
             c.markAsDirty();