feat(module:input-number): support clear input-number with nzAllowClear option (#918)

close #861

Author: vthinkxie

src/components/input-number/nz-input-number.component.ts

@@ -79,6 +79,7 @@ export class NzInputNumberComponent implements ControlValueAccessor {
   _disabledDown = false;
   _focused = false;
   _mouseInside = false;
+  _allowClear = false;
   // ngModel Access
   onChange: (value: number) => void = () => null;
   onTouched: () => void = () => null;
@@ -100,6 +101,15 @@ export class NzInputNumberComponent implements ControlValueAccessor {
     return this._disabled;
   }
 
+  @Input()
+  set nzAllowClear(value: boolean) {
+    this._allowClear = toBoolean(value);
+  }
+
+  get nzAllowClear(): boolean {
+    return this._allowClear;
+  }
+
   @Input()
   set nzSize(value: string) {
     this._renderer.removeClass(this._el, `${this._prefixCls}-${this._size}`);
@@ -190,7 +200,18 @@ export class NzInputNumberComponent implements ControlValueAccessor {
     }
   }
 
+  _isEmpty(value?: number | string | undefined | null): boolean {
+    return value === undefined
+      || value === null
+      || (typeof value === 'string' && this._displayValue.trim() === '')
+      || (typeof value === 'string' && this.nzFormatter('') === value);
+  }
+
   _checkValue(): void {
+    if (this.nzAllowClear && this._isEmpty(this._displayValue)) {
+      this.nzValue = undefined;
+      return;
+    }
     const numberValue = +this.nzParser(this._displayValue);
     if (this._isNumber(numberValue)) {
       this.nzValue = numberValue;
@@ -201,7 +222,9 @@ export class NzInputNumberComponent implements ControlValueAccessor {
   }
 
   _getBoundValue(value: number): number {
-    if (value > this.nzMax) {
+    if (this.nzAllowClear && (value === undefined)) {
+      return value;
+    } else if (value > this.nzMax) {
       return this.nzMax;
     } else if (value < this.nzMin) {
       return this.nzMin;
@@ -247,8 +270,8 @@ export class NzInputNumberComponent implements ControlValueAccessor {
   private _updateValue(value: number, emitChange: boolean = true): void {
     const cacheValue = this._value;
     this._value = this._getBoundValue(value);
-    this._displayValue = this.nzFormatter(this._value);
-    this._inputNumber.nativeElement.value = this.nzFormatter(this._value);
+    this._displayValue = this.nzFormatter(this._value || '');
+    this._inputNumber.nativeElement.value = this.nzFormatter(this._value || '');
     if (emitChange && (value !== cacheValue)) {
       this.onChange(this._value);
     }

src/showcase/nz-demo-input-number/nz-demo-input-number-digit.component.ts

@@ -8,5 +8,5 @@ import { Component } from '@angular/core';
   styles: []
 })
 export class NzDemoInputNumberDigitComponent {
-  demoValue: number;
+  demoValue = 1;
 }

src/showcase/nz-demo-input-number/nz-demo-input-number-formatter.component.ts

@@ -16,6 +16,6 @@ export class NzDemoInputNumberFormatterComponent {
   parserPercent = value => value.replace('%', '');
   formatterDollar = value => `$${value}`;
   parserDollar = value => value.replace('$', '');
-  formatterInt = value => parseInt(value, 10);
+  formatterInt = value =>  value ? parseInt(value , 10) : '';
   parserInt = value => parseInt(value, 10);
 }

src/showcase/nz-demo-input-number/nz-demo-input-number.html

@@ -125,6 +125,12 @@ <h2 id="API"><span>API</span>
           <td>function( string): number</td>
           <td>-</td>
         </tr>
+        <tr>
+          <td>nzAllowClear</td>
+          <td>是否允许清空input number中的数值</td>
+          <td>boolean</td>
+          <td>false</td>
+        </tr>
       </tbody>
     </table>
   </section>