InputNumberLegacy数字输入框

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

⚠️ InputNumberLegacy 已在 v19.0.0 中废弃,将在 v21.0.0 中移除,请使用新版 InputNumber 组件。

何时使用#

当需要获取标准数值时。

代码演示

数字输入框。

      加载中
    

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

      加载中
    

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

      加载中
    

指定 value 的精度

      加载中
    
+
$
+
$
cascader

用于配置一些固定组合。

      加载中
    

没有边框。

      加载中
    


点击按钮切换可用状态。

      加载中
    

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

      加载中
    

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

      加载中
    

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

      加载中
    

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]提供了用户在编辑元素或其内容时可能输入的数据类型的提示,详见MDNstring'decimal'
[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-
[nzSize]nz-input-number-group 中所有的 nz-input-number 的大小'large' | 'small' | 'default''default'
[nzStatus]设置校验状态'error' | 'warning'-

方法#

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

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