feat(module:input-number): support nzPrecisionMode mode (#4185)

* 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` 参数为自定义函数
NG-ZORRO · Feb 9, 2020 · bfe089f · bfe089f
1 parent da8821a
commit bfe089f
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 2 deletions.
diff --git a/components/input-number/demo/precision.md 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
@@ -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);
+  }
+}
diff --git 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
@@ -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
@@ -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
@@ -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"
     >
     </nz-input-number>
   `
@@ -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');