refactor(forms): extract NgControlStatus

This commit is contained in:
vsavkin 2015-09-29 11:19:06 -07:00 committed by Victor Savkin
parent cec4b36d9b
commit 7b2d8fce07
5 changed files with 46 additions and 85 deletions

View File

@ -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
]);

View File

@ -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; }
}

View File

@ -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; }
}

View File

@ -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;
}
}

View File

@ -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<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; }