InputNumber

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

When To Use#

When a numeric value needs to be provided.

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

Examples

Basic

Numeric-only input box.

expand codeexpand code
      Loading...
Sizes

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
      Loading...
Decimals

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
      Loading...
Precision

Set precision of the value

expand codeexpand code
      Loading...
+
$
+
$
cascader
Pre / Post tab

Using pre & post tabs example.

expand codeexpand code
      Loading...
Zhejiang
Input Number Group

InputNumber.Group example.

Note: You don't need nz-col to control the width in the nzCompact mode.

expand codeexpand code
      Loading...
Borderless

Borderless input number.

expand codeexpand code
      Loading...


Disabled

Click the button to toggle between available and disabled states.

expand codeexpand code
      Loading...
Formatter

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

expand codeexpand code
      Loading...
Status

Add status to InputNumber with nzStatus, which could be error or warning.

expand codeexpand code
      Loading...
￥
￥
￥
Prefix

Add a prefix inside input.

expand codeexpand code
      Loading...

API#

nz-input-number#

propertydescriptiontypedefault
[ngModel]current value, double bindingnumber | stringstring
[nzAutoFocus]get focus when component mountedbooleanfalse
[nzDisabled]disable the inputbooleanfalse
[nzReadOnly]If readonly 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(value: string) => value.trim().replace(/。/g, '.').replace(/[^\w\.-]+/g, '')
[nzPrecision]precision of input valuenumber-
[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'
[nzStatus]Set validation status'error' | 'warning'-
[nzStep]The number to which the current value is increased or decreased. It can be an integer or decimal.number | string1
[nzInputMode]enumerated attribute that hints at the type of data that might be entered by the user, MDNstringdecimal
[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>-

nz-input-number-group#

PropertyDescriptionTypeDefault
[nzAddOnAfter]The label text displayed after (on the right side of) the input number field, can work with nzAddOnBeforestring | TemplateRef<void>-
[nzAddOnBefore]The label text displayed before (on the left side of) the input number field, can work with nzAddOnAfterstring | TemplateRef<void>-
[nzPrefix]The prefix icon for the Input Number, can work with nzSuffixstring | TemplateRef<void>-
[nzSuffix]The suffix icon for the Input Number, can work with nzPrefixstring | TemplateRef<void>-
[nzPrefixIcon]The prefix icon for the Input Numberstring-
[nzSuffixIcon]The suffix icon for the Input Numberstring-
[nzCompact]Whether use compact stylebooleanfalse
[nzSize]The size of nz-input-number-group specifies the size of the included nz-input-number fields'large' | 'small' | 'default''default'
[nzStatus]Set validation status'error' | 'warning'-

Methods#

You can get instance by ViewChild

NameDescription
focus()get focus
blur()remove focus