InputNumber数字输入框

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

何时使用#

当需要获取标准数值时。

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

代码演示

数字输入框。

expand codeexpand code
加载中

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

expand codeexpand code
加载中

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

expand codeexpand code
加载中

指定 value 的精度

expand codeexpand code
加载中
+
$
+
$
cascader

用于配置一些固定组合。

expand codeexpand code
加载中
Zhejiang

数字输入框的组合展现。

注意:使用 nzCompact 模式时,不需要通过 nz-col 来控制宽度。

expand codeexpand code
加载中

没有边框。

expand codeexpand code
加载中

点击按钮切换可用状态。

expand codeexpand code
加载中

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

expand codeexpand code
加载中

使用 nzStatus 为 InputNumber 添加状态,可选 error 或者 warning

expand codeexpand code
加载中

在数字输入框上添加前缀图标。

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'
[nzStatus]设置校验状态'error' | 'warning'-
[nzStep]每次改变步数,可以为小数number | string1
[nzInputMode]提供了用户在编辑元素或其内容时可能输入的数据类型的提示,详见MDNstringdecimal
[nzPlaceHolder]选择框默认文字string-
[nzId]组件内部 input 的 id 值string-
(ngModelChange)数值改变时回调EventEmitter<number>-
(nzFocus)focus 时回调EventEmitter<void>-
(nzBlur)blur 时回调EventEmitter<void>-

nz-input-number-group#

参数说明类型默认值
[nzAddOnAfter]带标签的 input-number,设置后置标签,可以与 nzAddOnBefore 配合使用string | TemplateRef<void>-
[nzAddOnBefore]带标签的 input-number,设置前置标签,可以与 nzAddOnAfter 配合使用string | TemplateRef<void>-
[nzPrefix]带有前缀图标的 input-number,可以与 nzSuffix 配合使用string | TemplateRef<void>-
[nzSuffix]带有后缀图标的 input-number,可以与 nzPrefix 配合使用string | TemplateRef<void>-
[nzPrefixIcon]带有前缀图标的 input-numberstring-
[nzSuffixIcon]带有后缀图标的 input-numberstring-
[nzCompact]是否用紧凑模式booleanfalse
[nzSize]nz-input-number-group 中所有的 nz-input-number 的大小'large' | 'small' | 'default''default'
[nzStatus]设置校验状态'error' | 'warning'-

方法#

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

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