diff --git a/src/components/input-number/nz-input-number.component.spec.ts b/src/components/input-number/nz-input-number.component.spec.ts
new file mode 100644
index 00000000000..5fbe6d435f1
--- /dev/null
+++ b/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: `
+
+ `
+})
+export class NzInputNumberComponentSpecComponent {
+ isDisabled = false;
+ initValue = 1;
+ size = 'default';
+}
+
+
diff --git a/src/components/input-number/nz-input-number.component.ts b/src/components/input-number/nz-input-number.component.ts
index d477cd5c86b..1a4eb38163e 100644
--- a/src/components/input-number/nz-input-number.component.ts
+++ b/src/components/input-number/nz-input-number.component.ts
@@ -4,7 +4,6 @@ import {
Input,
ElementRef,
Renderer2,
- HostListener,
ViewChild,
HostBinding,
forwardRef
@@ -19,7 +18,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
{
- 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;