feat(forms): added support for status classes

modules/angular2/src/forms/directives/checkbox_value_accessor.ts

@@ -1,5 +1,4 @@
-import {ElementRef, Directive} from 'angular2/angular2';
-import {Renderer} from 'angular2/src/render/api';
+import {Directive} from 'angular2/angular2';
 import {ControlDirective} from './control_directive';
 import {ControlValueAccessor} from './control_value_accessor';
 
@@ -18,23 +17,28 @@ import {ControlValueAccessor} from './control_value_accessor';
   selector:
       'input[type=checkbox][ng-control],input[type=checkbox][ng-form-control],input[type=checkbox][ng-model]',
   hostListeners: {'change': 'onChange($event.target.checked)', 'blur': 'onTouched()'},
-  hostProperties: {'checked': 'checked'}
+  hostProperties: {
+    'checked': 'checked',
+    'cd.control?.untouched == true': 'class.ng-untouched',
+    'cd.control?.touched == true': 'class.ng-touched',
+    'cd.control?.pristine == true': 'class.ng-pristine',
+    'cd.control?.dirty == true': 'class.ng-dirty',
+    'cd.control?.valid == true': 'class.ng-valid',
+    'cd.control?.valid == false': 'class.ng-invalid'
+  }
 })
 export class CheckboxControlValueAccessor implements ControlValueAccessor {
   checked: boolean;
   onChange: Function;
   onTouched: Function;
 
-  constructor(cd: ControlDirective, private _elementRef: ElementRef, private _renderer: Renderer) {
+  constructor(private cd: ControlDirective) {
     this.onChange = (_) => {};
     this.onTouched = (_) => {};
     cd.valueAccessor = this;
   }
 
-  writeValue(value) {
-    this._renderer.setElementProperty(this._elementRef.parentView.render,
-                                      this._elementRef.boundElementIndex, 'checked', value)
-  }
+  writeValue(value) { this.checked = value; }
 
   registerOnChange(fn): void { this.onChange = fn; }
   registerOnTouched(fn): void { this.onTouched = fn; }

modules/angular2/src/forms/directives/control_directive.ts

@@ -1,5 +1,6 @@
 import {ControlValueAccessor} from './control_value_accessor';
 import {Validators} from '../validators';
+import {Control} from '../model';
 
 /**
  * A directive that bind a [ng-control] object to a DOM element.
@@ -12,6 +13,7 @@ export class ControlDirective {
   validator: Function;
 
   get path(): List<string> { return null; }
+  get control(): Control { return null; }
   constructor() { this.validator = Validators.nullValidator; }
 
   viewToModelUpdate(newValue: any): void {}

modules/angular2/src/forms/directives/control_name_directive.ts

@@ -7,6 +7,7 @@ import {FORWARD_REF, Binding, Inject} from 'angular2/di';
 import {ControlContainerDirective} from './control_container_directive';
 import {ControlDirective} from './control_directive';
 import {controlPath} from './shared';
+import {Control} from '../model';
 
 const controlNameBinding =
     CONST_EXPR(new Binding(ControlDirective, {toAlias: FORWARD_REF(() => ControlNameDirective)}));
@@ -84,6 +85,7 @@ export class ControlNameDirective extends ControlDirective {
     }
   }
 
+
   onDestroy() { this.formDirective.removeControl(this); }
 
   viewToModelUpdate(newValue: any): void { ObservableWrapper.callNext(this.ngModel, newValue); }
@@ -91,4 +93,6 @@ export class ControlNameDirective extends ControlDirective {
   get path(): List<string> { return controlPath(this.name, this._parent); }
 
   get formDirective(): any { return this._parent.formDirective; }
+
+  get control(): Control { return this.formDirective.getControl(this); }
 }

modules/angular2/src/forms/directives/default_value_accessor.ts

@@ -1,5 +1,4 @@
-import {ElementRef, Directive} from 'angular2/angular2';
-import {Renderer} from 'angular2/src/render/api';
+import {Directive} from 'angular2/angular2';
 import {ControlDirective} from './control_directive';
 import {ControlValueAccessor} from './control_value_accessor';
 
@@ -24,24 +23,30 @@ import {ControlValueAccessor} from './control_value_accessor';
     'input': 'onChange($event.target.value)',
     'blur': 'onTouched()'
   },
-  hostProperties: {'value': 'value'}
+  hostProperties: {
+    'value': 'value',
+    'cd.control?.untouched == true': 'class.ng-untouched',
+    'cd.control?.touched == true': 'class.ng-touched',
+    'cd.control?.pristine == true': 'class.ng-pristine',
+    'cd.control?.dirty == true': 'class.ng-dirty',
+    'cd.control?.valid == true': 'class.ng-valid',
+    'cd.control?.valid == false': 'class.ng-invalid'
+  }
 })
 export class DefaultValueAccessor implements ControlValueAccessor {
   value = null;
   onChange: Function;
   onTouched: Function;
 
-  constructor(cd: ControlDirective, private _elementRef: ElementRef, private _renderer: Renderer) {
+  constructor(private cd: ControlDirective) {
     this.onChange = (_) => {};
     this.onTouched = (_) => {};
     cd.valueAccessor = this;
   }
 
-  writeValue(value) {
-    this._renderer.setElementProperty(this._elementRef.parentView.render,
-                                      this._elementRef.boundElementIndex, 'value', value)
-  }
+  writeValue(value) { this.value = value; }
 
   registerOnChange(fn): void { this.onChange = fn; }
+
   registerOnTouched(fn): void { this.onTouched = fn; }
 }

modules/angular2/src/forms/directives/form_control_directive.ts

@@ -47,12 +47,12 @@ const formControlBinding =
 @Directive({
   selector: '[ng-form-control]',
   hostInjector: [formControlBinding],
-  properties: ['control: ng-form-control', 'model: ng-model'],
+  properties: ['form: ng-form-control', 'model: ng-model'],
   events: ['ngModel'],
   lifecycle: [onChange]
 })
 export class FormControlDirective extends ControlDirective {
-  control: Control;
+  form: Control;
   ngModel: EventEmitter;
   _added: boolean;
   model: any;
@@ -65,14 +65,18 @@ export class FormControlDirective extends ControlDirective {
 
   onChange(c) {
     if (!this._added) {
-      setUpControl(this.control, this);
-      this.control.updateValidity();
+      setUpControl(this.form, this);
+      this.form.updateValidity();
       this._added = true;
     }
     if (StringMapWrapper.contains(c, "model")) {
-      this.control.updateValue(this.model);
+      this.form.updateValue(this.model);
     }
   }
 
+  get control(): Control { return this.form; }
+
+  get path(): List<string> { return []; }
+
   viewToModelUpdate(newValue: any): void { ObservableWrapper.callNext(this.ngModel, newValue); }
 }

modules/angular2/src/forms/directives/form_directive.ts

@@ -1,9 +1,11 @@
 import {ControlDirective} from './control_directive';
 import {ControlGroupDirective} from './control_group_directive';
+import {Control} from '../model';
 
 export interface FormDirective {
   addControl(dir: ControlDirective): void;
   removeControl(dir: ControlDirective): void;
+  getControl(dir: ControlDirective): Control;
   addControlGroup(dir: ControlGroupDirective): void;
   removeControlGroup(dir: ControlGroupDirective): void;
   updateModel(dir: ControlDirective, value: any): void;

modules/angular2/src/forms/directives/form_model_directive.ts

@@ -81,6 +81,8 @@ export class FormModelDirective extends ControlContainerDirective implements For
     ListWrapper.push(this.directives, dir);
   }
 
+  getControl(dir: ControlDirective): Control { return <Control>this.form.find(dir.path); }
+
   removeControl(dir: ControlDirective): void { ListWrapper.remove(this.directives, dir); }
 
   addControlGroup(dir: ControlGroupDirective) {}

modules/angular2/src/forms/directives/select_control_value_accessor.ts

@@ -1,5 +1,4 @@
-import {ElementRef, Directive} from 'angular2/angular2';
-import {Renderer} from 'angular2/src/render/api';
+import {Directive} from 'angular2/angular2';
 import {ControlDirective} from './control_directive';
 import {ControlValueAccessor} from './control_value_accessor';
 
@@ -23,24 +22,29 @@ import {ControlValueAccessor} from './control_value_accessor';
     'input': 'onChange($event.target.value)',
     'blur': 'onTouched()'
   },
-  hostProperties: {'value': 'value'}
+  hostProperties: {
+    'value': 'value',
+    'cd.control?.untouched == true': 'class.ng-untouched',
+    'cd.control?.touched == true': 'class.ng-touched',
+    'cd.control?.pristine == true': 'class.ng-pristine',
+    'cd.control?.dirty == true': 'class.ng-dirty',
+    'cd.control?.valid == true': 'class.ng-valid',
+    'cd.control?.valid == false': 'class.ng-invalid'
+  }
 })
 export class SelectControlValueAccessor implements ControlValueAccessor {
   value = null;
   onChange: Function;
   onTouched: Function;
 
-  constructor(cd: ControlDirective, private _elementRef: ElementRef, private _renderer: Renderer) {
+  constructor(private cd: ControlDirective) {
     this.onChange = (_) => {};
     this.onTouched = (_) => {};
     this.value = '';
     cd.valueAccessor = this;
   }
 
-  writeValue(value) {
-    this._renderer.setElementProperty(this._elementRef.parentView.render,
-                                      this._elementRef.boundElementIndex, 'value', value)
-  }
+  writeValue(value) { this.value = value; }
 
   registerOnChange(fn): void { this.onChange = fn; }
   registerOnTouched(fn): void { this.onTouched = fn; }

modules/angular2/src/forms/directives/template_driven_form_directive.ts

@@ -43,6 +43,8 @@ export class TemplateDrivenFormDirective extends ControlContainerDirective imple
     });
   }
 
+  getControl(dir: ControlDirective): Control { return <Control>this.form.find(dir.path); }
+
   removeControl(dir: ControlDirective): void {
     this._later(_ => {
       var c = this._findContainer(dir.path);