refactor(forms): extract NgControlStatus

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

@@ -7,6 +7,7 @@ import {NgFormModel} from './directives/ng_form_model';
 import {NgForm} from './directives/ng_form';
 import {DefaultValueAccessor} from './directives/default_value_accessor';
 import {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
+import {NgControlStatus} from './directives/ng_control_status';
 import {
   SelectControlValueAccessor,
   NgSelectOption
@@ -28,6 +29,7 @@ export {
   NgSelectOption
 } from './directives/select_control_value_accessor';
 export {DefaultValidators} from './directives/validators';
+export {NgControlStatus} from './directives/ng_control_status';
 
 /**
  *
@@ -60,6 +62,7 @@ export const FORM_DIRECTIVES: Type[] = CONST_EXPR([
   DefaultValueAccessor,
   CheckboxControlValueAccessor,
   SelectControlValueAccessor,
+  NgControlStatus,
 
   DefaultValidators
 ]);

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

@@ -21,46 +21,19 @@ import {setProperty} from './shared';
       'input[type=checkbox][ng-control],input[type=checkbox][ng-form-control],input[type=checkbox][ng-model]',
   host: {
     '(change)': 'onChange($event.target.checked)',
-    '(blur)': 'onTouched()',
+    '(blur)': 'onTouched()'
-    '[class.ng-untouched]': 'ngClassUntouched',
-    '[class.ng-touched]': 'ngClassTouched',
-    '[class.ng-pristine]': 'ngClassPristine',
-    '[class.ng-dirty]': 'ngClassDirty',
-    '[class.ng-valid]': 'ngClassValid',
-    '[class.ng-invalid]': 'ngClassInvalid'
   }
 })
 export class CheckboxControlValueAccessor implements ControlValueAccessor {
-  private _cd: NgControl;
   onChange = (_) => {};
   onTouched = () => {};
 
   constructor(@Self() cd: NgControl, private _renderer: Renderer, private _elementRef: ElementRef) {
-    this._cd = cd;
     cd.valueAccessor = this;
   }
 
   writeValue(value: any): void { setProperty(this._renderer, this._elementRef, "checked", value); }
 
-  get ngClassUntouched(): boolean {
-    return isPresent(this._cd.control) ? this._cd.control.untouched : false;
-  }
-  get ngClassTouched(): boolean {
-    return isPresent(this._cd.control) ? this._cd.control.touched : false;
-  }
-  get ngClassPristine(): boolean {
-    return isPresent(this._cd.control) ? this._cd.control.pristine : false;
-  }
-  get ngClassDirty(): boolean {
-    return isPresent(this._cd.control) ? this._cd.control.dirty : false;
-  }
-  get ngClassValid(): boolean {
-    return isPresent(this._cd.control) ? this._cd.control.valid : false;
-  }
-  get ngClassInvalid(): boolean {
-    return isPresent(this._cd.control) ? !this._cd.control.valid : false;
-  }
-
   registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; }
   registerOnTouched(fn: () => {}): void { this.onTouched = fn; }
 }

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

@@ -22,22 +22,14 @@ import {setProperty} from './shared';
   host: {
     '(change)': 'onChange($event.target.value)',
     '(input)': 'onChange($event.target.value)',
-    '(blur)': 'onTouched()',
+    '(blur)': 'onTouched()'
-    '[class.ng-untouched]': 'ngClassUntouched',
-    '[class.ng-touched]': 'ngClassTouched',
-    '[class.ng-pristine]': 'ngClassPristine',
-    '[class.ng-dirty]': 'ngClassDirty',
-    '[class.ng-valid]': 'ngClassValid',
-    '[class.ng-invalid]': 'ngClassInvalid'
   }
 })
 export class DefaultValueAccessor implements ControlValueAccessor {
-  private _cd: NgControl;
   onChange = (_) => {};
   onTouched = () => {};
 
   constructor(@Self() cd: NgControl, private _renderer: Renderer, private _elementRef: ElementRef) {
-    this._cd = cd;
     cd.valueAccessor = this;
   }
 
@@ -46,26 +38,6 @@ export class DefaultValueAccessor implements ControlValueAccessor {
     setProperty(this._renderer, this._elementRef, 'value', normalizedValue);
   }
 
-  get ngClassUntouched(): boolean {
-    return isPresent(this._cd.control) ? this._cd.control.untouched : false;
-  }
-  get ngClassTouched(): boolean {
-    return isPresent(this._cd.control) ? this._cd.control.touched : false;
-  }
-  get ngClassPristine(): boolean {
-    return isPresent(this._cd.control) ? this._cd.control.pristine : false;
-  }
-  get ngClassDirty(): boolean {
-    return isPresent(this._cd.control) ? this._cd.control.dirty : false;
-  }
-  get ngClassValid(): boolean {
-    return isPresent(this._cd.control) ? this._cd.control.valid : false;
-  }
-  get ngClassInvalid(): boolean {
-    return isPresent(this._cd.control) ? !this._cd.control.valid : false;
-  }
-
   registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
-
   registerOnTouched(fn: () => void): void { this.onTouched = fn; }
 }

modules/angular2/src/core/forms/directives/ng_control_status.ts

@@ -0,0 +1,40 @@
+import {Directive} from 'angular2/src/core/metadata';
+import {Self} from 'angular2/src/core/di';
+import {NgControl} from './ng_control';
+import {isBlank, isPresent} from 'angular2/src/core/facade/lang';
+
+@Directive({
+  selector:'[ng-control],[ng-model],[ng-form-control]',
+  host: {
+    '[class.ng-untouched]': 'ngClassUntouched',
+    '[class.ng-touched]': 'ngClassTouched',
+    '[class.ng-pristine]': 'ngClassPristine',
+    '[class.ng-dirty]': 'ngClassDirty',
+    '[class.ng-valid]': 'ngClassValid',
+    '[class.ng-invalid]': 'ngClassInvalid'
+  }
+})
+export class NgControlStatus {
+  private _cd: NgControl;
+
+  constructor(@Self() cd: NgControl) { this._cd = cd; }
+
+  get ngClassUntouched(): boolean {
+    return isPresent(this._cd.control) ? this._cd.control.untouched : false;
+  }
+  get ngClassTouched(): boolean {
+    return isPresent(this._cd.control) ? this._cd.control.touched : false;
+  }
+  get ngClassPristine(): boolean {
+    return isPresent(this._cd.control) ? this._cd.control.pristine : false;
+  }
+  get ngClassDirty(): boolean {
+    return isPresent(this._cd.control) ? this._cd.control.dirty : false;
+  }
+  get ngClassValid(): boolean {
+    return isPresent(this._cd.control) ? this._cd.control.valid : false;
+  }
+  get ngClassInvalid(): boolean {
+    return isPresent(this._cd.control) ? !this._cd.control.valid : false;
+  }
+}

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

@@ -32,24 +32,16 @@ export class NgSelectOption {
   host: {
     '(change)': 'onChange($event.target.value)',
     '(input)': 'onChange($event.target.value)',
-    '(blur)': 'onTouched()',
+    '(blur)': 'onTouched()'
-    '[class.ng-untouched]': 'ngClassUntouched',
-    '[class.ng-touched]': 'ngClassTouched',
-    '[class.ng-pristine]': 'ngClassPristine',
-    '[class.ng-dirty]': 'ngClassDirty',
-    '[class.ng-valid]': 'ngClassValid',
-    '[class.ng-invalid]': 'ngClassInvalid'
   }
 })
 export class SelectControlValueAccessor implements ControlValueAccessor {
-  private _cd: NgControl;
   value: string;
   onChange = (_) => {};
   onTouched = () => {};
 
   constructor(@Self() cd: NgControl, private _renderer: Renderer, private _elementRef: ElementRef,
               @Query(NgSelectOption, {descendants: true}) query: QueryList<NgSelectOption>) {
-    this._cd = cd;
     cd.valueAccessor = this;
     this._updateValueWhenListOfOptionsChanges(query);
   }
@@ -59,25 +51,6 @@ export class SelectControlValueAccessor implements ControlValueAccessor {
     setProperty(this._renderer, this._elementRef, "value", value);
   }
 
-  get ngClassUntouched(): boolean {
-    return isPresent(this._cd.control) ? this._cd.control.untouched : false;
-  }
-  get ngClassTouched(): boolean {
-    return isPresent(this._cd.control) ? this._cd.control.touched : false;
-  }
-  get ngClassPristine(): boolean {
-    return isPresent(this._cd.control) ? this._cd.control.pristine : false;
-  }
-  get ngClassDirty(): boolean {
-    return isPresent(this._cd.control) ? this._cd.control.dirty : false;
-  }
-  get ngClassValid(): boolean {
-    return isPresent(this._cd.control) ? this._cd.control.valid : false;
-  }
-  get ngClassInvalid(): boolean {
-    return isPresent(this._cd.control) ? !this._cd.control.valid : false;
-  }
-
   registerOnChange(fn: () => any): void { this.onChange = fn; }
   registerOnTouched(fn: () => any): void { this.onTouched = fn; }