InputNumber

Enter a number within certain range with the mouse or keyboard.

Note:InputNumber will validate the input value only when (blur) and (keydown.enter) happened other than when user input character to avoid error ngModelChange output (-0.02001 or -1.0e28)

When To Use#

When a numeric value needs to be provided.

Import this Component Individually#

You can get more detail here.

import { NzInputNumberModule } from 'ng-zorro-antd/input-number';

Examples

Numeric-only input box.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-input-number-basic',
  template: `
    <nz-input-number [(ngModel)]="demoValue" [nzMin]="1" [nzMax]="10" [nzStep]="1"></nz-input-number>
  `
})
export class NzDemoInputNumberBasicComponent {
  demoValue = 3;
}

Click the button to toggle between available and disabled states.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-input-number-disabled',
  template: `
    <nz-input-number
      [(ngModel)]="demoValue"
      [nzMin]="1"
      [nzMax]="10"
      [nzStep]="1"
      [nzDisabled]="isDisabled"
    ></nz-input-number>
    <div style="margin-top:20px;">
      <button nz-button [nzType]="'primary'" (click)="toggleDisabled()">
        <span>Toggle Disabled</span>
      </button>
    </div>
  `
})
export class NzDemoInputNumberDisabledComponent {
  demoValue = 3;
  isDisabled = false;

  toggleDisabled(): void {
    this.isDisabled = !this.isDisabled;
  }
}

Display value within it's situation with nzFormatter, and we usually use nzParser at the same time.

expand codeexpand code
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]="formatterDollar"
      [nzParser]="parserDollar"
    ></nz-input-number>
    <nz-input-number
      [(ngModel)]="demoValue"
      [nzMin]="1"
      [nzMax]="100"
      [nzStep]="1"
      [nzFormatter]="formatterPercent"
      [nzParser]="parserPercent"
    ></nz-input-number>
  `,
  styles: [
    `
      nz-input-number {
        margin-right: 8px;
      }
    `
  ]
})
export class NzDemoInputNumberFormatterComponent {
  demoValue = 100;
  formatterPercent = (value: number) => `${value} %`;
  parserPercent = (value: string) => value.replace(' %', '');
  formatterDollar = (value: number) => `$ ${value}`;
  parserDollar = (value: string) => value.replace('$ ', '');
}

There are three sizes available to a numeric input box. By default, the nzSize is 32px. The two additional sizes are large and small which means 40px and 24px, respectively.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-input-number-size',
  template: `
    <nz-input-number [(ngModel)]="demoValue" [nzSize]="'large'" [nzMin]="1" [nzMax]="10" [nzStep]="1"></nz-input-number>
    <nz-input-number [(ngModel)]="demoValue" [nzMin]="1" [nzMax]="10" [nzStep]="1"></nz-input-number>
    <nz-input-number [(ngModel)]="demoValue" [nzSize]="'small'" [nzMin]="1" [nzMax]="10" [nzStep]="1"></nz-input-number>
  `,
  styles: [
    `
      nz-input-number {
        margin-right: 8px;
      }
    `
  ]
})
export class NzDemoInputNumberSizeComponent {
  demoValue = 3;
}

A numeric-only input box whose values can be increased or decreased using a decimal step. The number of decimals (also known as precision) is determined by the nzStep prop.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-input-number-digit',
  template: `
    <nz-input-number
      [(ngModel)]="demoValue"
      [nzMin]="1"
      [nzMax]="10"
      [nzStep]="0.1"
      [nzPlaceHolder]="'Digital'"
    ></nz-input-number>
  `
})
export class NzDemoInputNumberDigitComponent {
  demoValue: number;
}

API#

nz-input-number#

The value entered in nz-input-number will not be verified at the time of input, but will be fed back to [ngModel] and (ngModelChange) at a specific timing (Enter key, up and down keys, blur, etc.), otherwise input data such as -0.12 or 1e10, the ngModel will always be undefined.

propertydescriptiontypedefault
[ngModel]current value, double bindingnumber | string | string-
[nzAutoFocus]get focus when component mountedbooleanfalse
[nzDisabled]disable the inputbooleanfalse
[nzMax]max valuenumberInfinity
[nzMin]min valuenumber-Infinity
[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 valuenumber-
[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 | string1
[nzPlaceHolder]Placeholder of selectstring-
[nzId]input id attribute inside the componentstring-
(ngModelChange)The callback triggered when the value is changedEventEmitter<number>-
(nzFocus)focus callbackEventEmitter<void>-
(nzBlur)blur callbackEventEmitter<void>-

Methods#

You can get instance by ViewChild

NameDescription
focus()get focus
blur()remove focus