fix(module:inputnumber): validate inputnumber value & rewrite strategy (

#230)

close #42 close #203

src/components/input-number/nz-input-number.component.spec.ts

@@ -0,0 +1,75 @@
+/* tslint:disable:no-unused-variable */
+import { async, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import { NzInputNumberModule } from './nz-input-number.module';
+import { NzInputNumberComponent } from './nz-input-number.component';
+
+describe('NzInputNumber', () => {
+  let testComponent;
+  let fixture;
+  let debugElement;
+  describe('input number test all', () => {
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports     : [ NzInputNumberModule, FormsModule ],
+        declarations: [ NzInputNumberComponentSpecComponent ],
+        providers   : []
+      }).compileComponents();
+    }));
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(NzInputNumberComponentSpecComponent);
+      testComponent = fixture.debugElement.componentInstance;
+      debugElement = fixture.debugElement.query(By.directive(NzInputNumberComponent));
+    });
+    it('should disabled up and down work', fakeAsync(() => {
+      fixture.detectChanges();
+      const handlerDownElement = debugElement.nativeElement.querySelector('.ant-input-number-handler-down');
+      expect(handlerDownElement.classList.contains('ant-input-number-handler-down-disabled')).toBe(true);
+      handlerDownElement.click();
+      fixture.detectChanges();
+      expect(testComponent.initValue).toBe(1);
+      testComponent.initValue = 9;
+      fixture.detectChanges();
+      tick();
+      const handlerUpElement = debugElement.nativeElement.querySelector('.ant-input-number-handler-up');
+      handlerUpElement.click();
+      fixture.detectChanges();
+      expect(handlerUpElement.classList.contains('ant-input-number-handler-up-disabled')).toBe(true);
+      expect(testComponent.initValue).toBe(10);
+    }));
+    it('should disable style work', () => {
+      testComponent.isDisabled = true;
+      fixture.detectChanges();
+      expect(debugElement.nativeElement.classList.contains('ant-input-number-disabled')).toBe(true);
+    });
+    fit('should size style work', fakeAsync(() => {
+      testComponent.size = 'large';
+      tick();
+      fixture.detectChanges();
+      expect(debugElement.nativeElement.classList.contains('ant-input-number-lg')).toBe(true);
+      testComponent.size = 'small';
+      tick();
+      fixture.detectChanges();
+      expect(debugElement.nativeElement.classList.contains('ant-input-number-sm')).toBe(true);
+    }));
+  });
+});
+
+/** Test component that contains an InputNumber. */
+
+@Component({
+  selector: 'nz-input-number-component-spec',
+  template: `
+    <nz-input-number [nzSize]="size" [(ngModel)]="initValue" [nzMin]="1" [nzMax]="10" [nzStep]="1" [nzDisabled]="isDisabled"></nz-input-number>
+  `
+})
+export class NzInputNumberComponentSpecComponent {
+  isDisabled = false;
+  initValue = 1;
+  size = 'default';
+}
+
+

src/components/input-number/nz-input-number.component.ts

@@ -4,7 +4,6 @@ import {
   Input,
   ElementRef,
   Renderer2,
-  HostListener,
   ViewChild,
   HostBinding,
   forwardRef
@@ -19,29 +18,29 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
     <div class="ant-input-number-handler-wrap">
       <a class="ant-input-number-handler ant-input-number-handler-up"
         [ngClass]="{'ant-input-number-handler-up-disabled':_disabledUp}"
-        (mousedown)="_numberUp($event)">
+        (click)="_numberUp($event)">
         <span
           class="ant-input-number-handler-up-inner"
           (click)="$event.preventDefault();"></span>
       </a>
       <a
         class="ant-input-number-handler ant-input-number-handler-down"
         [ngClass]="{'ant-input-number-handler-down-disabled':_disabledDown}"
-        (mousedown)="_numberDown($event)">
+        (click)="_numberDown($event)">
         <span
           class="ant-input-number-handler-down-inner"
           (click)="$event.preventDefault();">
         </span>
       </a>
     </div>
     <div
-      #inputWrapper
       class="ant-input-number-input-wrap">
       <input class="ant-input-number-input"
         #inputNumber
+        (blur)="_checkValue()"
         [placeholder]="nzPlaceHolder"
         [disabled]="nzDisabled"
-        [(ngModel)]="nzValue"
+        [(ngModel)]="_displayValue"
         (ngModelChange)="_userInputChange()"
         [attr.min]="nzMin"
         [attr.max]="nzMax"
@@ -64,16 +63,16 @@ export class NzInputNumberComponent implements ControlValueAccessor {
   _value: number;
   _size = 'default';
   _prefixCls = 'ant-input-number';
-  _disabledUp = false;
-  _disabledDown = false;
   _step = 1;
   _precisionStep = 0;
   _precisionFactor = 1;
+  _displayValue;
+  _disabledUp = false;
+  _disabledDown = false;
   // ngModel Access
   onChange: any = Function.prototype;
   onTouched: any = Function.prototype;
   @ViewChild('inputNumber') _inputNumber: ElementRef;
-  @ViewChild('inputWrapper') _inputWrapper: ElementRef;
 
   @Input() nzPlaceHolder = '';
   @Input() nzMin: number = -Infinity;
@@ -109,30 +108,15 @@ export class NzInputNumberComponent implements ControlValueAccessor {
     this._precisionFactor = Math.pow(10, this._precisionStep);
   }
 
-  @HostListener('document:click', [ '$event.target' ])
-  onClick(target) {
-    if (target && !this._inputWrapper.nativeElement.contains(target)) {
-      this._offClick();
-    }
-  }
-
-  _checkDisabled = () => {
-    this._disabledUp = !((this.nzValue + this.nzStep) <= this.nzMax);
-    this._disabledDown = !((this.nzValue - this.nzStep) >= this.nzMin);
-  }
-
   _numberUp($event) {
     $event.preventDefault();
     $event.stopPropagation();
     if (this.nzValue === undefined) {
       this.nzValue = this.nzMin || 0;
     }
-    this._checkDisabled();
     if (!this._disabledUp) {
       this.nzValue = this.toPrecisionAsStep((this._precisionFactor * this.nzValue + this._precisionFactor * this.nzStep) / this._precisionFactor);
     }
-    this._checkDisabled();
-    this._userInputChange();
   }
 
   _numberDown($event) {
@@ -141,12 +125,9 @@ export class NzInputNumberComponent implements ControlValueAccessor {
     if (this.nzValue === undefined) {
       this.nzValue = this.nzMin || 0;
     }
-    this._checkDisabled();
     if (!this._disabledDown) {
       this.nzValue = this.toPrecisionAsStep((this._precisionFactor * this.nzValue - this._precisionFactor * this.nzStep) / this._precisionFactor);
     }
-    this._checkDisabled();
-    this._userInputChange();
   }
 
   get nzValue(): number {
@@ -157,35 +138,39 @@ export class NzInputNumberComponent implements ControlValueAccessor {
     if (this._value === value) {
       return;
     }
-    if (value > this.nzMax) {
-      this._value = this.nzMax;
-      this.onChange(this.nzMax);
-    } else if (value < this.nzMin) {
-      this._value = this.nzMin;
-      this.onChange(this.nzMin);
-    } else {
-      this._value = value;
-      this._checkDisabled();
-    }
+    this._value = this._getBoundValue(value);
+    this._displayValue = this._value;
+    this._inputNumber.nativeElement.value = this._value;
+    this.onChange(this._value);
+    this._disabledUp = (this.nzValue !== undefined) && !((this.nzValue + this.nzStep) <= this.nzMax);
+    this._disabledDown = (this.nzValue !== undefined) && !((this.nzValue - this.nzStep) >= this.nzMin);
   }
 
   _userInputChange() {
-    this.onChange(this.nzValue);
+    const numberValue = +this._displayValue;
+    if (this._isNumber(numberValue) && (numberValue <= this.nzMax) && (numberValue >= this.nzMin)) {
+      this.nzValue = numberValue;
+    }
   }
 
-  _offClick() {
-    if (this._value === undefined) {
-      return;
-    }
-    if (this._inputNumber.nativeElement.value > this.nzMax) {
-      this._inputNumber.nativeElement.value = this.nzMax;
-      this.onChange(this.nzMax);
-    } else if (this._inputNumber.nativeElement.value < this.nzMin) {
-      this._inputNumber.nativeElement.value = this.nzMin;
-      this.onChange(this.nzMin);
+  _checkValue() {
+    this._displayValue = this.nzValue;
+  }
+
+  _getBoundValue(value) {
+    if (value > this.nzMax) {
+      return this.nzMax;
+    } else if (value < this.nzMin) {
+      return this.nzMin;
+    } else {
+      return value;
     }
   }
 
+  _isNumber(value) {
+    return !isNaN(value) && isFinite(value)
+  }
+
   toPrecisionAsStep(num) {
     if (isNaN(num) || num === '') {
       return num;