feat(module:input-number): support formatter & parser (#740)

* fix(module:datepicker): disable datepicker when user input * feat(module:input-number): support formatter & parser close #739
NG-ZORRO · Dec 14, 2017 · c7ddc4b · c7ddc4b
1 parent 84c0f23
commit c7ddc4b
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 10 deletions.
diff --git a/src/components/input-number/nz-input-number.component.ts b/src/components/input-number/nz-input-number.component.ts
@@ -87,6 +87,8 @@ export class NzInputNumberComponent implements ControlValueAccessor {
   @Input() nzPlaceHolder = '';
   @Input() nzMin: number = -Infinity;
   @Input() nzMax: number = Infinity;
+  @Input() nzFormatter = (value) => value;
+  @Input() nzParser = (value) => value;
 
   @Input()
   @HostBinding('class.ant-input-number-disabled')
@@ -189,11 +191,13 @@ export class NzInputNumberComponent implements ControlValueAccessor {
   }
 
   _checkValue(): void {
-    const numberValue = +this._displayValue;
+    const numberValue = +this.nzParser(this._displayValue);
     if (this._isNumber(numberValue)) {
       this.nzValue = numberValue;
+    } else {
+      this._displayValue = this.nzFormatter(this._value);
+      this._inputNumber.nativeElement.value = this.nzFormatter(this._value);
     }
-    this._displayValue = this.nzValue;
   }
 
   _getBoundValue(value: number): number {
@@ -225,7 +229,6 @@ export class NzInputNumberComponent implements ControlValueAccessor {
   }
 
   writeValue(value: number): void {
-    // this.nzValue = value;
     this._updateValue(value, false);
   }
 
@@ -242,13 +245,11 @@ export class NzInputNumberComponent implements ControlValueAccessor {
   }
 
   private _updateValue(value: number, emitChange: boolean = true): void {
-    if (this._value === value) {
-      return;
-    }
+    const cacheValue = this._value;
     this._value = this._getBoundValue(value);
-    this._displayValue = this._value;
-    this._inputNumber.nativeElement.value = this._value;
-    if (emitChange) {
+    this._displayValue = this.nzFormatter(this._value);
+    this._inputNumber.nativeElement.value = this.nzFormatter(this._value);
+    if (emitChange && (value !== cacheValue)) {
       this.onChange(this._value);
     }
     this._disabledUp = (this.nzValue !== undefined) && !((this.nzValue + this.nzStep) <= this.nzMax);

diff --git a/src/showcase/nz-demo-input-number/nz-demo-input-number-formatter.component.ts b/src/showcase/nz-demo-input-number/nz-demo-input-number-formatter.component.ts
@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-input-number-formatter',
+  template: `
+    <nz-input-number [(ngModel)]="demoValue" [nzMin]="1" [nzMax]="100" [nzStep]="1" [nzFormatter]="formatterPercent" [nzParser]="parserPercent"></nz-input-number>
+    <nz-input-number [(ngModel)]="demoValue" [nzMin]="1" [nzMax]="100" [nzStep]="1" [nzFormatter]="formatterDollar" [nzParser]="parserDollar"></nz-input-number>
+    <nz-input-number [(ngModel)]="demoValue" [nzMin]="1" [nzMax]="100" [nzStep]="1" [nzFormatter]="formatterInt" [nzParser]="parserInt"></nz-input-number>
+  `,
+
+  styles: []
+})
+export class NzDemoInputNumberFormatterComponent {
+  demoValue = 100;
+  formatterPercent = value => `${value}%`;
+  parserPercent = value => value.replace('%', '');
+  formatterDollar = value => `$${value}`;
+  parserDollar = value => value.replace('$', '');
+  formatterInt = value => parseInt(value, 10);
+  parserInt = value => parseInt(value, 10);
+}
diff --git a/src/showcase/nz-demo-input-number/nz-demo-input-number.component.ts b/src/showcase/nz-demo-input-number/nz-demo-input-number.component.ts
@@ -10,6 +10,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
 })
 export class NzDemoInputNumberComponent {
   NzDemoInputNumberBasicCode = require('!!raw-loader!./nz-demo-input-number-basic.component');
+  NzDemoInputNumberFormatterCode = require('!!raw-loader!./nz-demo-input-number-formatter.component');
   NzDemoInputNumberDigitCode = require('!!raw-loader!./nz-demo-input-number-digit.component');
   NzDemoInputNumberSizeCode = require('!!raw-loader!./nz-demo-input-number-size.component');
   NzDemoInputNumberDisabledCode = require('!!raw-loader!./nz-demo-input-number-disabled.component');

diff --git a/src/showcase/nz-demo-input-number/nz-demo-input-number.html b/src/showcase/nz-demo-input-number/nz-demo-input-number.html
@@ -21,6 +21,12 @@ <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" titl
           <p>点击按钮切换可用状态。</p>
         </div>
       </nz-code-box>
+      <nz-code-box [nzTitle]="'格式化展示'" id="components-input-number-formatter" [nzCode]="NzDemoInputNumberFormatterCode">
+        <nz-demo-input-number-formatter demo></nz-demo-input-number-formatter>
+        <div intro>
+          <p>通过 <code>nzFormatter</code> 格式化数字，以展示具有具体含义的数据，往往需要配合 <code>nzParser</code> 一起使用。</p>
+        </div>
+      </nz-code-box>
     </div>
     <div nz-col [nzSpan]="12">
       <nz-code-box [nzTitle]="'三种大小'" id="components-input-number-demo-size" [nzCode]="NzDemoInputNumberSizeCode">
@@ -107,6 +113,18 @@ <h2 id="API"><span>API</span>
           <td>EventEmitter</td>
           <td>无</td>
         </tr>
+        <tr>
+          <td>nzFormatter</td>
+          <td>指定输入框展示值的格式</td>
+          <td>function(value: number | string): string</td>
+          <td>-</td>
+        </tr>
+        <tr>
+          <td>nzParser</td>
+          <td>指定从 nzFormatter 里转换回数字的方式，和 nzFormatter 搭配使用</td>
+          <td>function( string): number</td>
+          <td>-</td>
+        </tr>
       </tbody>
     </table>
   </section>

diff --git a/src/showcase/nz-demo-input-number/nz-demo-input-number.module.ts b/src/showcase/nz-demo-input-number/nz-demo-input-number.module.ts
@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
 import { NzDemoInputNumberBasicComponent } from './nz-demo-input-number-basic.component';
+import { NzDemoInputNumberFormatterComponent } from './nz-demo-input-number-formatter.component';
 import { NzDemoInputNumberSizeComponent } from './nz-demo-input-number-size.component';
 import { NzDemoInputNumberDisabledComponent } from './nz-demo-input-number-disabled.component';
 import { NzDemoInputNumberDigitComponent } from './nz-demo-input-number-digit.component';
@@ -15,7 +16,7 @@ import { NzDemoInputNumberRoutingModule } from './nz-demo-input-number.routing.m
 
 @NgModule({
   imports     : [ NzDemoInputNumberRoutingModule, CommonModule, NzCodeBoxModule, NgZorroAntdModule, FormsModule ],
-  declarations: [ NzDemoInputNumberBasicComponent, NzDemoInputNumberSizeComponent, NzDemoInputNumberDisabledComponent, NzDemoInputNumberDigitComponent, NzDemoInputNumberComponent ]
+  declarations: [ NzDemoInputNumberFormatterComponent, NzDemoInputNumberBasicComponent, NzDemoInputNumberSizeComponent, NzDemoInputNumberDisabledComponent, NzDemoInputNumberDigitComponent, NzDemoInputNumberComponent ]
 })
 export class NzDemoInputNumberModule {