Skip to content

Commit

Permalink
fix(module:inputnumber): validate inputnumber value & rewrite strategy
Browse files Browse the repository at this point in the history 
close #42 close #203
  • Loading branch information
执衡 committed Sep 6, 2017
1 parent 6e1b144 commit 30f6f58
Show file tree
Hide file tree
Showing 2 changed files with 107 additions and 47 deletions.
75 changes: 75 additions & 0 deletions src/components/input-number/nz-input-number.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
}


79 changes: 32 additions & 47 deletions src/components/input-number/nz-input-number.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import {
Input,
ElementRef,
Renderer2,
HostListener,
ViewChild,
HostBinding,
forwardRef
Expand All @@ -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"
Expand All @@ -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;
Expand Down Expand Up @@ -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) {
Expand All @@ -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 {
Expand All @@ -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;
Expand Down

0 comments on commit 30f6f58

Please sign in to comment.