InputNumber数字输入框

通过鼠标或键盘,输入范围内的数值。

何时使用#

当需要获取标准数值时。

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

代码演示

数字输入框。

expand codeexpand code
加载中

点击按钮切换可用状态。

expand codeexpand code
加载中

通过 nzFormatter 格式化数字,以展示具有具体含义的数据,往往需要配合 nzParser 一起使用。

expand codeexpand code
加载中

三种大小的数字输入框,当 nzSize 分别为 largesmall 时,输入框高度为 40px24px ,默认高度为 32px

expand codeexpand code
加载中

和原生的数字输入框一样,value 的精度由 nzStep 的小数位数决定。

expand codeexpand code
加载中

指定 value 的精度

expand codeexpand code
加载中

API#

nz-input-number#

成员说明类型默认值
[ngModel]当前值,可双向绑定number | stringstring
[nzAutoFocus]自动获取焦点booleanfalse
[nzDisabled]禁用booleanfalse
[nzReadOnly]只读booleanfalse
[nzMax]最大值numberInfinity
[nzMin]最小值number-Infinity
[nzFormatter]指定输入框展示值的格式(value: number | string) => string | number-
[nzParser]指定从 nzFormatter 里转换回数字的方式,和 nzFormatter 搭配使用(value: string) => string | number(value: string) => value.trim().replace(/。/g, '.').replace(/[^\w\.-]+/g, '')
[nzPrecision]数值精度number-
[nzPrecisionMode]数值精度的取值方式'cut' | 'toFixed' | ((value: number | string, precision?: number) => number)'toFixed'
[nzSize]输入框大小'large' | 'small' | 'default''default'
[nzStep]每次改变步数,可以为小数number | string1
[nzInputMode]提供了用户在编辑元素或其内容时可能输入的数据类型的提示,详见MDNstringdecimal
[nzPlaceHolder]选择框默认文字string-
[nzId]组件内部 input 的 id 值string-
(ngModelChange)数值改变时回调EventEmitter<number>-
(nzFocus)focus时回调EventEmitter<void>-
(nzBlur)blur时回调EventEmitter<void>-

方法#

通过 ViewChild 等方法获得实例后调用

名称描述
focus()获取焦点
blur()移除焦点