From 5fcb4cfa1cd7ed7b992d171c1a2f9a44e47df655 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ingo=20B=C3=BCrk?= Date: Sun, 16 Dec 2018 17:17:08 +0100 Subject: [PATCH] feat(core): Added NumberControlValueAccessor relates #14 --- .../ngqp/core/src/lib/accessors/accessors.ts | 5 +- ...efault-control-value-accessor.directive.ts | 4 +- ...number-control-value-accessor.directive.ts | 51 +++++++++++++++++++ ...select-control-value-accessor.directive.ts | 6 +-- .../src/lib/query-param-name.directive.ts | 6 +-- .../ngqp/core/src/lib/query-param.module.ts | 12 +++-- 6 files changed, 69 insertions(+), 15 deletions(-) create mode 100644 projects/ngqp/core/src/lib/accessors/number-control-value-accessor.directive.ts diff --git a/projects/ngqp/core/src/lib/accessors/accessors.ts b/projects/ngqp/core/src/lib/accessors/accessors.ts index fa7b4f6..c607a85 100644 --- a/projects/ngqp/core/src/lib/accessors/accessors.ts +++ b/projects/ngqp/core/src/lib/accessors/accessors.ts @@ -1,2 +1,3 @@ -export { NgqpDefaultControlValueAccessorDirective } from './default-control-value-accessor.directive'; -export { NgqpSelectControlValueAccessorDirective, NgqpSelectOptionDirective } from './select-control-value-accessor.directive'; \ No newline at end of file +export { DefaultControlValueAccessorDirective } from './default-control-value-accessor.directive'; +export { NumberControlValueAccessorDirective } from './number-control-value-accessor.directive'; +export { SelectControlValueAccessorDirective, NgqpSelectOptionDirective } from './select-control-value-accessor.directive'; \ No newline at end of file diff --git a/projects/ngqp/core/src/lib/accessors/default-control-value-accessor.directive.ts b/projects/ngqp/core/src/lib/accessors/default-control-value-accessor.directive.ts index b969a00..02ce72e 100644 --- a/projects/ngqp/core/src/lib/accessors/default-control-value-accessor.directive.ts +++ b/projects/ngqp/core/src/lib/accessors/default-control-value-accessor.directive.ts @@ -4,7 +4,7 @@ import { isPlatformBrowser } from '@angular/common'; export const NGQP_DEFAULT_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => NgqpDefaultControlValueAccessorDirective), + useExisting: forwardRef(() => DefaultControlValueAccessorDirective), multi: true }; @@ -16,7 +16,7 @@ function isAndroid(navigator: Navigator): boolean { selector: 'input:not([type=checkbox]):not([type=radio])[queryParamName],textarea[queryParamName]', providers: [NGQP_DEFAULT_VALUE_ACCESSOR], }) -export class NgqpDefaultControlValueAccessorDirective implements ControlValueAccessor { +export class DefaultControlValueAccessorDirective implements ControlValueAccessor { private readonly supportsComposition: boolean; private composing = false; diff --git a/projects/ngqp/core/src/lib/accessors/number-control-value-accessor.directive.ts b/projects/ngqp/core/src/lib/accessors/number-control-value-accessor.directive.ts new file mode 100644 index 0000000..758d5e6 --- /dev/null +++ b/projects/ngqp/core/src/lib/accessors/number-control-value-accessor.directive.ts @@ -0,0 +1,51 @@ +import { Directive, ElementRef, forwardRef, HostListener, Renderer2 } from '@angular/core'; +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; + +export const NGQP_NUMBER_VALUE_ACCESSOR: any = { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => NumberControlValueAccessorDirective), + multi: true +}; + +@Directive({ + selector: 'input[type=number][queryParamName]', + providers: [NGQP_NUMBER_VALUE_ACCESSOR], +}) +export class NumberControlValueAccessorDirective implements ControlValueAccessor { + + private fnChange = (_: number) => {}; + private fnTouched = () => {}; + + @HostListener('change', ['$event']) + @HostListener('input', ['$event']) + public onInput(event: UIEvent) { + const value = (event.target as HTMLInputElement).value; + this.fnChange(value === '' ? null : parseFloat(value)); + } + + @HostListener('blur') + public onBlur() { + this.fnTouched(); + } + + constructor(private renderer: Renderer2, private elementRef: ElementRef) { + } + + public writeValue(value: string) { + const normalizedValue = value === null ? '' : value; + this.renderer.setProperty(this.elementRef.nativeElement, 'value', normalizedValue); + } + + public registerOnChange(fn: any) { + this.fnChange = fn; + } + + public registerOnTouched(fn: any) { + this.fnTouched = fn; + } + + public setDisabledState(isDisabled: boolean) { + this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', isDisabled); + } + +} \ No newline at end of file diff --git a/projects/ngqp/core/src/lib/accessors/select-control-value-accessor.directive.ts b/projects/ngqp/core/src/lib/accessors/select-control-value-accessor.directive.ts index 8922f17..dd7cac3 100644 --- a/projects/ngqp/core/src/lib/accessors/select-control-value-accessor.directive.ts +++ b/projects/ngqp/core/src/lib/accessors/select-control-value-accessor.directive.ts @@ -14,7 +14,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; export const NGQP_SELECT_VALUE_ACCESSOR: StaticProvider = { provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => NgqpSelectControlValueAccessorDirective), + useExisting: forwardRef(() => SelectControlValueAccessorDirective), multi: true }; @@ -22,7 +22,7 @@ export const NGQP_SELECT_VALUE_ACCESSOR: StaticProvider = { selector: 'select:not([multiple])[queryParamName]', providers: [NGQP_SELECT_VALUE_ACCESSOR], }) -export class NgqpSelectControlValueAccessorDirective implements ControlValueAccessor { +export class SelectControlValueAccessorDirective implements ControlValueAccessor { public value: T | null = null; private selectedId: string | null = null; @@ -108,7 +108,7 @@ export class NgqpSelectOptionDirective implements OnDestroy { private readonly id: string | null = null; constructor( - @Optional() @Host() private parent: NgqpSelectControlValueAccessorDirective, + @Optional() @Host() private parent: SelectControlValueAccessorDirective, private renderer: Renderer2, private elementRef: ElementRef, ) { diff --git a/projects/ngqp/core/src/lib/query-param-name.directive.ts b/projects/ngqp/core/src/lib/query-param-name.directive.ts index bedfc87..d408195 100644 --- a/projects/ngqp/core/src/lib/query-param-name.directive.ts +++ b/projects/ngqp/core/src/lib/query-param-name.directive.ts @@ -1,7 +1,7 @@ import { Directive, Host, Inject, Input, OnChanges, OnInit, Optional, Self, SimpleChanges, SkipSelf } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { QueryParamGroupDirective } from './query-param-group.directive'; -import { NgqpDefaultControlValueAccessorDirective } from './accessors/accessors'; +import { DefaultControlValueAccessorDirective } from './accessors/accessors'; /** * TODO Documentation @@ -57,13 +57,13 @@ export class QueryParamNameDirective implements OnInit, OnChanges { // TODO Check against all our custom accessors (similar to selectValueAccessor in @angular/forms) const customAccessor = valueAccessors - .find(valueAccessor => valueAccessor.constructor !== NgqpDefaultControlValueAccessorDirective); + .find(valueAccessor => valueAccessor.constructor !== DefaultControlValueAccessorDirective); if (customAccessor !== undefined) { return customAccessor; } const defaultAccessor = valueAccessors - .find(valueAccessor => valueAccessor.constructor === NgqpDefaultControlValueAccessorDirective); + .find(valueAccessor => valueAccessor.constructor === DefaultControlValueAccessorDirective); if (defaultAccessor !== undefined) { return defaultAccessor; } diff --git a/projects/ngqp/core/src/lib/query-param.module.ts b/projects/ngqp/core/src/lib/query-param.module.ts index 38029e5..88e1fb0 100644 --- a/projects/ngqp/core/src/lib/query-param.module.ts +++ b/projects/ngqp/core/src/lib/query-param.module.ts @@ -2,9 +2,10 @@ import { NgModule, Type } from '@angular/core'; import { QueryParamNameDirective } from './query-param-name.directive'; import { QueryParamGroupDirective } from './query-param-group.directive'; import { - NgqpDefaultControlValueAccessorDirective, - NgqpSelectControlValueAccessorDirective, - NgqpSelectOptionDirective + DefaultControlValueAccessorDirective, + NgqpSelectOptionDirective, + NumberControlValueAccessorDirective, + SelectControlValueAccessorDirective } from './accessors/accessors'; const DIRECTIVES: Type[] = [ @@ -12,8 +13,9 @@ const DIRECTIVES: Type[] = [ QueryParamGroupDirective, // Accessors - NgqpDefaultControlValueAccessorDirective, - NgqpSelectControlValueAccessorDirective, + DefaultControlValueAccessorDirective, + NumberControlValueAccessorDirective, + SelectControlValueAccessorDirective, NgqpSelectOptionDirective, ];