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

Numeric-only input box.

expand codeexpand code
Loading...

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

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

Set precision of the value

expand codeexpand code
Loading...
+
$
+
$
cascader

Using pre & post tabs example.

expand codeexpand code
Loading...
Zhejiang

InputNumber.Group example.

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

expand codeexpand code
Loading...

Borderless input number.

expand codeexpand code
Loading...

Click the button to toggle between available and disabled states.

expand codeexpand code
Loading...

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

expand codeexpand code
Loading...

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

expand codeexpand code
Loading...

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