From 7b2d8fce0746c0ff45bcf1f4f6935d5411d38fd2 Mon Sep 17 00:00:00 2001 From: vsavkin Date: Tue, 29 Sep 2015 11:19:06 -0700 Subject: [PATCH] refactor(forms): extract NgControlStatus --- modules/angular2/src/core/forms/directives.ts | 3 ++ .../directives/checkbox_value_accessor.ts | 29 +------------- .../directives/default_value_accessor.ts | 30 +------------- .../forms/directives/ng_control_status.ts | 40 +++++++++++++++++++ .../select_control_value_accessor.ts | 29 +------------- 5 files changed, 46 insertions(+), 85 deletions(-) create mode 100644 modules/angular2/src/core/forms/directives/ng_control_status.ts diff --git a/modules/angular2/src/core/forms/directives.ts b/modules/angular2/src/core/forms/directives.ts index 72ed589f2e..346532022d 100644 --- a/modules/angular2/src/core/forms/directives.ts +++ b/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 ]); diff --git a/modules/angular2/src/core/forms/directives/checkbox_value_accessor.ts b/modules/angular2/src/core/forms/directives/checkbox_value_accessor.ts index f76c38b996..e06aac3aa2 100644 --- a/modules/angular2/src/core/forms/directives/checkbox_value_accessor.ts +++ b/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()', - '[class.ng-untouched]': 'ngClassUntouched', - '[class.ng-touched]': 'ngClassTouched', - '[class.ng-pristine]': 'ngClassPristine', - '[class.ng-dirty]': 'ngClassDirty', - '[class.ng-valid]': 'ngClassValid', - '[class.ng-invalid]': 'ngClassInvalid' + '(blur)': 'onTouched()' } }) 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; } } diff --git a/modules/angular2/src/core/forms/directives/default_value_accessor.ts b/modules/angular2/src/core/forms/directives/default_value_accessor.ts index 9888f4cfbb..96fa235a43 100644 --- a/modules/angular2/src/core/forms/directives/default_value_accessor.ts +++ b/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()', - '[class.ng-untouched]': 'ngClassUntouched', - '[class.ng-touched]': 'ngClassTouched', - '[class.ng-pristine]': 'ngClassPristine', - '[class.ng-dirty]': 'ngClassDirty', - '[class.ng-valid]': 'ngClassValid', - '[class.ng-invalid]': 'ngClassInvalid' + '(blur)': 'onTouched()' } }) 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; } } diff --git a/modules/angular2/src/core/forms/directives/ng_control_status.ts b/modules/angular2/src/core/forms/directives/ng_control_status.ts new file mode 100644 index 0000000000..29af72fb2f --- /dev/null +++ b/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; + } +} diff --git a/modules/angular2/src/core/forms/directives/select_control_value_accessor.ts b/modules/angular2/src/core/forms/directives/select_control_value_accessor.ts index 69b528240d..6298857bdf 100644 --- a/modules/angular2/src/core/forms/directives/select_control_value_accessor.ts +++ b/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()', - '[class.ng-untouched]': 'ngClassUntouched', - '[class.ng-touched]': 'ngClassTouched', - '[class.ng-pristine]': 'ngClassPristine', - '[class.ng-dirty]': 'ngClassDirty', - '[class.ng-valid]': 'ngClassValid', - '[class.ng-invalid]': 'ngClassInvalid' + '(blur)': 'onTouched()' } }) 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) { - 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; }