feat(forms): added support for status classes

Author: vsavkin

modules/angular2/src/core/compiler/proto_view_factory.ts

@@ -105,7 +105,10 @@ class BindingRecordsCreator {
  if (directiveRecord.callOnCheck) {
  ListWrapper.push(bindings, BindingRecord.createDirectiveOnCheck(directiveRecord));
  }
+ }
 
+ for (var i = 0; i < directiveBinders.length; i++) {
+ var directiveBinder = directiveBinders[i];
  // host properties
  MapWrapper.forEach(directiveBinder.hostPropertyBindings, (astWithSource, propertyName) => {
  var dirIndex = new DirectiveIndex(boundElementIndex, i);

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,11 +85,14 @@ export class ControlNameDirective extends ControlDirective {
  }
  }
 
+
  onDestroy() { this.formDirective.removeControl(this); }
 
  viewToModelUpdate(newValue: any): void { ObservableWrapper.callNext(this.ngModel, newValue); }
 
  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);