From bfe089fcc1b63873bab7a3d5ef7061d92ec78122 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BB=BB=E4=BE=A0?= Date: Sun, 9 Feb 2020 20:30:37 +0800 Subject: [PATCH] feat(module:input-number): support nzPrecisionMode mode (#4185) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(module:input-number): 增加 `nzPrecisionMode` 参数，支持数值精度使用截位方式取值 close #4173 * fix(module:input-number): fix for precision demo * fix(module:input-number): fix for precision unit * refactor(module:input-number): 支持 `nzPrecisionMode` 参数为自定义函数 --- components/input-number/demo/precision.md | 14 ++++++ components/input-number/demo/precision.ts | 36 +++++++++++++ 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 | 16 +++++- .../input-number/nz-input-number.spec.ts | 50 +++++++++++++++++++ 6 files changed, 116 insertions(+), 2 deletions(-) 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..5cba1a918a0 --- /dev/null +++ b/components/input-number/demo/precision.ts @@ -0,0 +1,36 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nz-demo-input-number-precision', + template: ` + + + + `, + styles: [ + ` + nz-input-number { + margin-right: 8px; + } + ` + ] +}) +export class NzDemoInputNumberPrecisionComponent { + 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 81e4a890c23..7d0b8705fb2 100755 --- a/components/input-number/doc/index.en-US.md +++ b/components/input-number/doc/index.en-US.md @@ -32,6 +32,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 | `'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 3a26446b9e6..20b956c2947 100755 --- a/components/input-number/doc/index.zh-CN.md +++ b/components/input-number/doc/index.zh-CN.md @@ -33,6 +33,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]` | 数值精度的取值方式 | `'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 443f36f26e1..c9dbd0d9a4a 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: 'cut' | 'toFixed' | ((value: number | string, precision?: number) => number) = 'toFixed'; @Input() nzPlaceHolder = ''; @Input() nzStep = 1; @Input() nzId: string; @@ -131,8 +132,19 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn if (this.isNotCompleteNumber(num)) { return num as number; } - if (isNotNil(this.nzPrecision)) { - return Number(Number(num).toFixed(this.nzPrecision)); + const numStr = String(num); + if (numStr.indexOf('.') >= 0) { + if (typeof this.nzPrecisionMode === 'function') { + return this.nzPrecisionMode(num, this.nzPrecision); + } + if (isNotNil(this.nzPrecision)) { + const numSplit = numStr.split('.'); + 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(num); } diff --git a/components/input-number/nz-input-number.spec.ts b/components/input-number/nz-input-number.spec.ts index 6c3dd5b57c8..b0a57e6c43c 100644 --- a/components/input-number/nz-input-number.spec.ts +++ b/components/input-number/nz-input-number.spec.ts @@ -274,6 +274,54 @@ 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 = 'toFixed'; + 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.nzInputNumberComponent.onModelChange('1.0099'); + fixture.detectChanges(); + testComponent.nzInputNumberComponent.onBlur(); + fixture.detectChanges(); + expect(testComponent.value).toBe(1); + + testComponent.precisionMode = 'cut'; + 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); + + 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; testComponent.max = 10; @@ -462,6 +510,7 @@ describe('input number', () => { [nzFormatter]="formatter" [nzParser]="parser" [nzPrecision]="precision" + [nzPrecisionMode]="precisionMode" > ` @@ -477,6 +526,7 @@ export class NzTestInputNumberBasicComponent { placeholder = 'placeholder'; step = 1; precision?: number = 2; + precisionMode: 'cut' | 'toFixed' | ((value: number | string, precision?: number) => number); formatter = (value: number) => (value !== null ? `${value}` : ''); parser = (value: number) => value; modelChange = jasmine.createSpy('change callback');