From d9da39ef6e8b274b009f9dfb15a63a5a1640bf0f Mon Sep 17 00:00:00 2001 From: renxia Date: Thu, 19 Sep 2019 14:22:02 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat(module:input-number):=20=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=20`nzPrecisionMode`=20=E5=8F=82=E6=95=B0=EF=BC=8C?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=95=B0=E5=80=BC=E7=B2=BE=E5=BA=A6=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=E6=88=AA=E4=BD=8D=E6=96=B9=E5=BC=8F=E5=8F=96=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit close #4173 --- components/input-number/demo/precision.md | 14 ++++++++ components/input-number/demo/precision.ts | 25 ++++++++++++++ components/input-number/doc/index.en-US.md | 1 + components/input-number/doc/index.zh-CN.md | 1 + .../input-number/nz-input-number.component.ts | 12 ++++++- .../input-number/nz-input-number.spec.ts | 33 +++++++++++++++++++ 6 files changed, 85 insertions(+), 1 deletion(-) create mode 100644 components/input-number/demo/precision.md create mode 100644 components/input-number/demo/precision.ts diff --git a/components/input-number/demo/precision.md b/components/input-number/demo/precision.md new file mode 100644 index 00000000000..155122335ac --- /dev/null +++ b/components/input-number/demo/precision.md @@ -0,0 +1,14 @@ +--- +order: 5 +title: + zh-CN: 精度 + en-US: Precision +--- + +## zh-CN + +指定 value 的精度 + +## en-US + +Set precision of the value diff --git a/components/input-number/demo/precision.ts b/components/input-number/demo/precision.ts new file mode 100644 index 00000000000..ca42229a7f3 --- /dev/null +++ b/components/input-number/demo/precision.ts @@ -0,0 +1,25 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nz-demo-input-number-size', + template: ` + + + `, + styles: [ + ` + nz-input-number { + margin-right: 8px; + } + ` + ] +}) +export class NzDemoInputNumberPrecisionComponent { + demoValue = 3; + precision = 2; +} diff --git a/components/input-number/doc/index.en-US.md b/components/input-number/doc/index.en-US.md index e5b829d9681..71892e17ea5 100755 --- a/components/input-number/doc/index.en-US.md +++ b/components/input-number/doc/index.en-US.md @@ -36,6 +36,7 @@ The value entered in `nz-input-number` will not be verified at the time of input | `[nzFormatter]` | Specifies the format of the value presented | `(value: number \| string) => string \| number` | - | | `[nzParser]` | Specifies the value extracted from nzFormatter | `(value: string) => string \| number` | - | | `[nzPrecision]` | precision of input value | `number` | - | +| `[nzPrecisionMode]` | The method for calculating the precision of input value | `round|floor` | `round` | | `[nzSize]` | width of input box | `'large' \| 'small' \| 'default'` | `'default'` | | `[nzStep]` | The number to which the current value is increased or decreased. It can be an integer or decimal. | `number \| string` | `1` | | `[nzPlaceHolder]` | Placeholder of select | `string` | - | diff --git a/components/input-number/doc/index.zh-CN.md b/components/input-number/doc/index.zh-CN.md index 447fdbab62f..23abfcd4ab6 100755 --- a/components/input-number/doc/index.zh-CN.md +++ b/components/input-number/doc/index.zh-CN.md @@ -37,6 +37,7 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number'; | `[nzFormatter]` | 指定输入框展示值的格式 | `(value: number \| string) => string \| number` | - | | `[nzParser]` | 指定从 nzFormatter 里转换回数字的方式，和 nzFormatter 搭配使用 | `(value: string) => string \| number` | - | | `[nzPrecision]` | 数值精度 | `number` | - | +| `[nzPrecisionMode]` | 数值精度的取值方式 | `round|floor` | `round` | | `[nzSize]` | 输入框大小 | `'large' \| 'small' \| 'default'` | `'default'` | | `[nzStep]` | 每次改变步数，可以为小数 | `number \| string` | `1` | | `[nzPlaceHolder]` | 选择框默认文字 | `string` | - | diff --git a/components/input-number/nz-input-number.component.ts b/components/input-number/nz-input-number.component.ts index 8645a931476..981ea0d92be 100644 --- a/components/input-number/nz-input-number.component.ts +++ b/components/input-number/nz-input-number.component.ts @@ -68,6 +68,7 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn @Input() nzMax: number = Infinity; @Input() nzParser = (value: any) => value; // tslint:disable-line:no-any @Input() nzPrecision: number; + @Input() nzPrecisionMode: 'round' | 'floor'; @Input() nzPlaceHolder = ''; @Input() nzStep = 1; @Input() nzId: string; @@ -136,7 +137,16 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn if (this.isNotCompleteNumber(num)) { return num as number; } - if (isNotNil(this.nzPrecision)) { + const numStr = String(num); + if (isNotNil(this.nzPrecision) && ~numStr.indexOf('.')) { + if (this.nzPrecisionMode === 'floor') { + const numSplit = numStr.split('.'); + numSplit[1] = numSplit[1].slice(0, this.nzPrecision || 0); + if (!numSplit[1]) { + return Number(numSplit[0]); + } + return Number(numSplit.join('.')); + } return Number(Number(num).toFixed(this.nzPrecision)); } return Number(num); diff --git a/components/input-number/nz-input-number.spec.ts b/components/input-number/nz-input-number.spec.ts index 700111551e7..e82ea6fe541 100644 --- a/components/input-number/nz-input-number.spec.ts +++ b/components/input-number/nz-input-number.spec.ts @@ -274,6 +274,37 @@ describe('input number', () => { fixture.detectChanges(); expect(testComponent.value).toBe(1); }); + it('should nzPrecisionMode work', () => { + testComponent.nzInputNumberComponent.onModelChange('0.999'); + fixture.detectChanges(); + testComponent.nzInputNumberComponent.onBlur(); + fixture.detectChanges(); + expect(testComponent.value).toBe(1); + + testComponent.precisionMode = 'round'; + testComponent.nzInputNumberComponent.onModelChange('0.991'); + fixture.detectChanges(); + testComponent.nzInputNumberComponent.onBlur(); + fixture.detectChanges(); + expect(testComponent.value).toBe(0.99); + testComponent.nzInputNumberComponent.onModelChange('0.999'); + fixture.detectChanges(); + testComponent.nzInputNumberComponent.onBlur(); + fixture.detectChanges(); + expect(testComponent.value).toBe(1); + + testComponent.precisionMode = 'floor'; + testComponent.nzInputNumberComponent.onModelChange('0.991'); + fixture.detectChanges(); + testComponent.nzInputNumberComponent.onBlur(); + fixture.detectChanges(); + expect(testComponent.value).toBe(0.99); + testComponent.nzInputNumberComponent.onModelChange('0.998'); + fixture.detectChanges(); + testComponent.nzInputNumberComponent.onBlur(); + fixture.detectChanges(); + expect(testComponent.value).toBe(0.99); + }); it('should nzStep work', () => { testComponent.step = 2; testComponent.max = 10; @@ -460,6 +491,7 @@ describe('input number', () => { [nzFormatter]="formatter" [nzParser]="parser" [nzPrecision]="precision" + [nzPrecisionMode]="precisionMode" > ` @@ -475,6 +507,7 @@ export class NzTestInputNumberBasicComponent { placeholder = 'placeholder'; step = 1; precision?: number = 2; + precisionMode: 'round' | 'floor'; formatter = (value: number) => (value !== null ? `${value}` : ''); parser = (value: number) => value; modelChange = jasmine.createSpy('change callback'); From 2073f76df9eec5ec0040925c1208cb8767ef4d8d Mon Sep 17 00:00:00 2001 From: renxia Date: Thu, 19 Sep 2019 15:08:19 +0800 Subject: [PATCH 2/4] fix(module:input-number): fix for precision demo --- components/input-number/demo/precision.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/input-number/demo/precision.ts b/components/input-number/demo/precision.ts index ca42229a7f3..fde4c388253 100644 --- a/components/input-number/demo/precision.ts +++ b/components/input-number/demo/precision.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; @Component({ - selector: 'nz-demo-input-number-size', + selector: 'nz-demo-input-number-precision', template: ` Date: Thu, 19 Sep 2019 16:13:53 +0800 Subject: [PATCH 3/4] fix(module:input-number): fix for precision unit --- components/input-number/nz-input-number.component.ts | 5 +---- components/input-number/nz-input-number.spec.ts | 5 +++++ 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/components/input-number/nz-input-number.component.ts b/components/input-number/nz-input-number.component.ts index 981ea0d92be..85b41021503 100644 --- a/components/input-number/nz-input-number.component.ts +++ b/components/input-number/nz-input-number.component.ts @@ -141,10 +141,7 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn if (isNotNil(this.nzPrecision) && ~numStr.indexOf('.')) { if (this.nzPrecisionMode === 'floor') { const numSplit = numStr.split('.'); - numSplit[1] = numSplit[1].slice(0, this.nzPrecision || 0); - if (!numSplit[1]) { - return Number(numSplit[0]); - } + numSplit[1] = numSplit[1].slice(0, this.nzPrecision); return Number(numSplit.join('.')); } return Number(Number(num).toFixed(this.nzPrecision)); diff --git a/components/input-number/nz-input-number.spec.ts b/components/input-number/nz-input-number.spec.ts index e82ea6fe541..e336260b829 100644 --- a/components/input-number/nz-input-number.spec.ts +++ b/components/input-number/nz-input-number.spec.ts @@ -292,6 +292,11 @@ describe('input number', () => { testComponent.nzInputNumberComponent.onBlur(); fixture.detectChanges(); expect(testComponent.value).toBe(1); + testComponent.nzInputNumberComponent.onModelChange('1.0099'); + fixture.detectChanges(); + testComponent.nzInputNumberComponent.onBlur(); + fixture.detectChanges(); + expect(testComponent.value).toBe(1); testComponent.precisionMode = 'floor'; testComponent.nzInputNumberComponent.onModelChange('0.991'); From b3fca73b446a8c33352acb1b202e3389393db3d6 Mon Sep 17 00:00:00 2001 From: renxia Date: Fri, 20 Sep 2019 10:23:37 +0800 Subject: [PATCH 4/4] =?UTF-8?q?refactor(module:input-number):=20=20?= =?UTF-8?q?=E6=94=AF=E6=8C=81=20`nzPrecisionMode`=20=E5=8F=82=E6=95=B0?= =?UTF-8?q?=E4=B8=BA=E8=87=AA=E5=AE=9A=E4=B9=89=E5=87=BD=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/input-number/demo/precision.ts | 21 ++++++++++++++----- components/input-number/doc/index.en-US.md | 2 +- components/input-number/doc/index.zh-CN.md | 2 +- .../input-number/nz-input-number.component.ts | 17 +++++++++------ .../input-number/nz-input-number.spec.ts | 18 +++++++++++++--- 5 files changed, 44 insertions(+), 16 deletions(-) diff --git a/components/input-number/demo/precision.ts b/components/input-number/demo/precision.ts index fde4c388253..5cba1a918a0 100644 --- a/components/input-number/demo/precision.ts +++ b/components/input-number/demo/precision.ts @@ -3,12 +3,18 @@ import { Component } from '@angular/core'; @Component({ selector: 'nz-demo-input-number-precision', template: ` - + + `, styles: [ @@ -20,6 +26,11 @@ import { Component } from '@angular/core'; ] }) export class NzDemoInputNumberPrecisionComponent { - demoValue = 3; + toFixedValue = 2.128; + cutValue = 2.128; + customFnValue = 2.128; precision = 2; + customPrecisionFn(value: number, precision: number): number { + return +Number(value).toFixed(precision + 1); + } } diff --git a/components/input-number/doc/index.en-US.md b/components/input-number/doc/index.en-US.md index 71892e17ea5..95dd276d9d2 100755 --- a/components/input-number/doc/index.en-US.md +++ b/components/input-number/doc/index.en-US.md @@ -36,7 +36,7 @@ The value entered in `nz-input-number` will not be verified at the time of input | `[nzFormatter]` | Specifies the format of the value presented | `(value: number \| string) => string \| number` | - | | `[nzParser]` | Specifies the value extracted from nzFormatter | `(value: string) => string \| number` | - | | `[nzPrecision]` | precision of input value | `number` | - | -| `[nzPrecisionMode]` | The method for calculating the precision of input value | `round|floor` | `round` | +| `[nzPrecisionMode]` | The method for calculating the precision of input value | `'cut' \| 'toFixed' \| ((value: number \| string, precision?: number) => number)` | `'toFixed'` | | `[nzSize]` | width of input box | `'large' \| 'small' \| 'default'` | `'default'` | | `[nzStep]` | The number to which the current value is increased or decreased. It can be an integer or decimal. | `number \| string` | `1` | | `[nzPlaceHolder]` | Placeholder of select | `string` | - | diff --git a/components/input-number/doc/index.zh-CN.md b/components/input-number/doc/index.zh-CN.md index 23abfcd4ab6..83239adc932 100755 --- a/components/input-number/doc/index.zh-CN.md +++ b/components/input-number/doc/index.zh-CN.md @@ -37,7 +37,7 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number'; | `[nzFormatter]` | 指定输入框展示值的格式 | `(value: number \| string) => string \| number` | - | | `[nzParser]` | 指定从 nzFormatter 里转换回数字的方式，和 nzFormatter 搭配使用 | `(value: string) => string \| number` | - | | `[nzPrecision]` | 数值精度 | `number` | - | -| `[nzPrecisionMode]` | 数值精度的取值方式 | `round|floor` | `round` | +| `[nzPrecisionMode]` | 数值精度的取值方式 | `'cut' \| 'toFixed' \| ((value: number \| string, precision?: number) => number)` | `'toFixed'` | | `[nzSize]` | 输入框大小 | `'large' \| 'small' \| 'default'` | `'default'` | | `[nzStep]` | 每次改变步数，可以为小数 | `number \| string` | `1` | | `[nzPlaceHolder]` | 选择框默认文字 | `string` | - | diff --git a/components/input-number/nz-input-number.component.ts b/components/input-number/nz-input-number.component.ts index 85b41021503..097385ec3ec 100644 --- a/components/input-number/nz-input-number.component.ts +++ b/components/input-number/nz-input-number.component.ts @@ -68,7 +68,7 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn @Input() nzMax: number = Infinity; @Input() nzParser = (value: any) => value; // tslint:disable-line:no-any @Input() nzPrecision: number; - @Input() nzPrecisionMode: 'round' | 'floor'; + @Input() nzPrecisionMode: 'cut' | 'toFixed' | ((value: number | string, precision?: number) => number) = 'toFixed'; @Input() nzPlaceHolder = ''; @Input() nzStep = 1; @Input() nzId: string; @@ -138,13 +138,18 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn return num as number; } const numStr = String(num); - if (isNotNil(this.nzPrecision) && ~numStr.indexOf('.')) { - if (this.nzPrecisionMode === 'floor') { + if (numStr.indexOf('.') >= 0) { + if (typeof this.nzPrecisionMode === 'function') { + return this.nzPrecisionMode(num, this.nzPrecision); + } + if (isNotNil(this.nzPrecision)) { const numSplit = numStr.split('.'); - numSplit[1] = numSplit[1].slice(0, this.nzPrecision); - return Number(numSplit.join('.')); + if (this.nzPrecisionMode === 'cut') { + numSplit[1] = numSplit[1].slice(0, this.nzPrecision); + return Number(numSplit.join('.')); + } + return Number(Number(num).toFixed(this.nzPrecision)); } - return Number(Number(num).toFixed(this.nzPrecision)); } return Number(num); } diff --git a/components/input-number/nz-input-number.spec.ts b/components/input-number/nz-input-number.spec.ts index e336260b829..228e414d105 100644 --- a/components/input-number/nz-input-number.spec.ts +++ b/components/input-number/nz-input-number.spec.ts @@ -281,7 +281,7 @@ describe('input number', () => { fixture.detectChanges(); expect(testComponent.value).toBe(1); - testComponent.precisionMode = 'round'; + testComponent.precisionMode = 'toFixed'; testComponent.nzInputNumberComponent.onModelChange('0.991'); fixture.detectChanges(); testComponent.nzInputNumberComponent.onBlur(); @@ -298,7 +298,7 @@ describe('input number', () => { fixture.detectChanges(); expect(testComponent.value).toBe(1); - testComponent.precisionMode = 'floor'; + testComponent.precisionMode = 'cut'; testComponent.nzInputNumberComponent.onModelChange('0.991'); fixture.detectChanges(); testComponent.nzInputNumberComponent.onBlur(); @@ -309,6 +309,18 @@ describe('input number', () => { testComponent.nzInputNumberComponent.onBlur(); fixture.detectChanges(); expect(testComponent.value).toBe(0.99); + + testComponent.precisionMode = value => +Number(value).toFixed(2); + testComponent.nzInputNumberComponent.onModelChange('0.991'); + fixture.detectChanges(); + testComponent.nzInputNumberComponent.onBlur(); + fixture.detectChanges(); + expect(testComponent.value).toBe(0.99); + testComponent.nzInputNumberComponent.onModelChange('0.998'); + fixture.detectChanges(); + testComponent.nzInputNumberComponent.onBlur(); + fixture.detectChanges(); + expect(testComponent.value).toBe(1); }); it('should nzStep work', () => { testComponent.step = 2; @@ -512,7 +524,7 @@ export class NzTestInputNumberBasicComponent { placeholder = 'placeholder'; step = 1; precision?: number = 2; - precisionMode: 'round' | 'floor'; + precisionMode: 'cut' | 'toFixed' | ((value: number | string, precision?: number) => number); formatter = (value: number) => (value !== null ? `${value}` : ''); parser = (value: number) => value; modelChange = jasmine.createSpy('change callback');