feat(core): Added NumberControlValueAccessor

relates #14

Author: Airblader

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';
+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';

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;

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);
+    }
+
+}

projects/ngqp/core/src/lib/accessors/select-control-value-accessor.directive.ts

@@ -14,15 +14,15 @@ 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
 };
 
 @Directive({
     selector: 'select:not([multiple])[queryParamName]',
     providers: [NGQP_SELECT_VALUE_ACCESSOR],
 })
-export class NgqpSelectControlValueAccessorDirective<T> implements ControlValueAccessor {
+export class SelectControlValueAccessorDirective<T> implements ControlValueAccessor {
 
     public value: T | null = null;
     private selectedId: string | null = null;
@@ -108,7 +108,7 @@ export class NgqpSelectOptionDirective<T> implements OnDestroy {
     private readonly id: string | null = null;
 
     constructor(
-        @Optional() @Host() private parent: NgqpSelectControlValueAccessorDirective<T>,
+        @Optional() @Host() private parent: SelectControlValueAccessorDirective<T>,
         private renderer: Renderer2,
         private elementRef: ElementRef,
     ) {

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

projects/ngqp/core/src/lib/query-param.module.ts

@@ -2,18 +2,20 @@ 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<any>[] = [
     QueryParamNameDirective,
     QueryParamGroupDirective,
 
     // Accessors
-    NgqpDefaultControlValueAccessorDirective,
-    NgqpSelectControlValueAccessorDirective,
+    DefaultControlValueAccessorDirective,
+    NumberControlValueAccessorDirective,
+    SelectControlValueAccessorDirective,
     NgqpSelectOptionDirective,
 ];