refactor(forms): extract NgControlStatus
This commit is contained in:
parent
cec4b36d9b
commit
7b2d8fce07
|
@ -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
|
||||
]);
|
||||
|
|
|
@ -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; }
|
||||
}
|
||||
|
|
|
@ -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; }
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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; }
|
||||
|
||||
|
|
Loading…
Reference in New Issue