Skip to content

Commit

Permalink
feat(module:input-number): support nzPrecisionMode mode (#4185)
Browse files Browse the repository at this point in the history
* 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` 参数为自定义函数
  • Loading branch information
renxia committed Feb 9, 2020
1 parent da8821a commit bfe089f
Show file tree
Hide file tree
Showing 6 changed files with 116 additions and 2 deletions.
14 changes: 14 additions & 0 deletions 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
36 changes: 36 additions & 0 deletions components/input-number/demo/precision.ts
@@ -0,0 +1,36 @@
import { Component } from '@angular/core';

@Component({
selector: 'nz-demo-input-number-precision',
template: `
<nz-input-number [(ngModel)]="toFixedValue" [nzPrecision]="precision" nzPlaceHolder="toFixed"></nz-input-number>
<nz-input-number
[(ngModel)]="cutValue"
[nzPrecision]="precision"
nzPrecisionMode="cut"
nzPlaceHolder="cut off"
></nz-input-number>
<nz-input-number
[(ngModel)]="customFnValue"
[nzPrecision]="precision"
[nzPrecisionMode]="customPrecisionFn"
nzPlaceHolder="cut off"
></nz-input-number>
`,
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);
}
}
1 change: 1 addition & 0 deletions components/input-number/doc/index.en-US.md
Expand Up @@ -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` | - |
Expand Down
1 change: 1 addition & 0 deletions components/input-number/doc/index.zh-CN.md
Expand Up @@ -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` | - |
Expand Down
16 changes: 14 additions & 2 deletions components/input-number/nz-input-number.component.ts
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
Expand Down
50 changes: 50 additions & 0 deletions components/input-number/nz-input-number.spec.ts
Expand Up @@ -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;
Expand Down Expand Up @@ -462,6 +510,7 @@ describe('input number', () => {
[nzFormatter]="formatter"
[nzParser]="parser"
[nzPrecision]="precision"
[nzPrecisionMode]="precisionMode"
>
</nz-input-number>
`
Expand All @@ -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');
Expand Down

0 comments on commit bfe089f

Please sign in to comment.