NG-ZORROInputNumber
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.
Loading...
Using pre & post tabs example.
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.
Loading...
Use the nzKeyboard property to control keyboard behavior.
`
Loading...
When the value is out of range in controlled mode, a warning style is provided.
Loading...
Add status to InputNumber with nzStatus, which could be error or warning.
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.
Loading...
Click the button to toggle between available and disabled states.
Loading...
Display value within it's situation with nzFormatter, and we usually use nzParser at the same time.
Loading...
Borderless input number.
Loading...
Add a prefix inside input.
Loading...
Custom arrow icon.
Loading...
API#
nz-input-number#
| property | description | type | default |
|---|---|---|---|
[ngModel] | current value, two way binding | number | - |
[nzId] | ID of the input box | string | - |
[nzPlaceHolder] | placeholder | string | - |
[nzAutoFocus] | auto focus | boolean | false |
[nzBordered] | whether to have border | boolean | true |
[nzControls] | whether to show up and down buttons | boolean | true |
[nzDisabled] | whether to disable | boolean | false |
[nzFormatter] | specify the format of the displayed value | (value: number) => string | - |
[nzMax] | maximum value | number | Number.MAX_SAFE_INTEGER |
[nzMin] | minimum value | number | Number.MIN_SAFE_INTEGER |
[nzParser] | specify how to convert back to a number from formatter, used with formatter | (value: string) => number | - |
[nzPrecision] | numerical precision, the formatter configuration takes precedence | number | - |
[nzReadOnly] | whether to read only | boolean | false |
[nzStatus] | status, optional errorwarning | string | - |
[nzSize] | input box size, optional largedefaultsmall | string | default |
[nzStep] | step of each change, can be a decimal | number | 1 |
(nzOnStep) | callback when clicking the up and down arrows | EventEmitter<{ value: number, offset: number, type: 'up' | 'down' }> | - |
(ngModelChange) | callback function when the value changes | EventEmitter<number> | - |
Methods#
You can get instance by ViewChild
| Name | Description |
|---|---|
| focus() | get focus |
| blur() | remove focus |
FAQ#
Why can the value exceed the min and max range in controlled mode?#
In controlled mode, developers may store related data by themselves. If the component constrains the data back to the range, it will cause the displayed data to be inconsistent with the actual stored data. This leads to potential data problems in some scenarios such as form fields.