InputNumber
数字输入框

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

何时使用#

当需要获取标准数值时。

代码演示#

数字输入框。

      加载中
    
+
$
+
$
+
$
cascader

用于配置一些固定组合。

      加载中
    

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

      加载中
    

使用 nzKeyboard 属性可以控制键盘行为。

      加载中
    

当通过受控将 value 超出边界时,提供警告样式。

      加载中
    

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

      加载中
    

使用 nzChangeOnWheel 启用鼠标滚轮控制。

      加载中
    

三种大小的数字输入框,当 nzSize 分别为 large 和 small 时,输入框高度为 40px 和 24px ,默认高度为 32px。

      加载中
    


点击按钮切换可用状态。

      加载中
    

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

      加载中
    

InputNumber 形态变体,可选 outlined、filled、borderless、underlined 四种形态。

      加载中
    
20.0.0
¥
¥
¥
¥

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

      加载中
    

自定义箭头图标。

      加载中
    


Focus 提供额外配置属性

      加载中
    

API#

nz-input-number#

参数说明类型默认值版本
[ngModel]当前值,可双向绑定number-
[nzId]输入框的 IDstring-
[nzPlaceHolder]占位符string-
[nzAutoFocus]自动获取焦点booleanfalse
[nzVariant]形态变体'outlined' | 'borderless' | 'filled' | 'underlined''outlined'20.0.0
[nzControls]是否显示增减按钮booleantrue
[nzDisabled]是否禁用booleanfalse
[nzFormatter]指定输入框展示值的格式(value: number) => string-
[nzKeyboard]是否启用键盘快捷行为booleantrue
[nzChangeOnWheel]是否启用鼠标滚轮控制booleantrue21.0.0
[nzMax]最大值numberNumber.MAX_SAFE_INTEGER
[nzMin]最小值numberNumber.MIN_SAFE_INTEGER
[nzParser]指定从 formatter 里转换回数字的方式,和 formatter 搭配使用(value: string) => number-
[nzPrecision]数值精度,配置 formatter 时会以 formatter 为准number-
[nzReadOnly]是否只读booleanfalse
[nzStatus]状态,可选 errorwarning'error' | 'warning'-
[nzSize]输入框大小,可选 largedefaultsmall'large' | 'small' | 'default''default'
[nzStep]每次改变步数,可以是小数number1
[nzAddonBefore]带标签的 input-number,设置前置标签string-
[nzAddonAfter]带标签的 input-number,设置后置标签string-
[nzPrefix]带有前缀图标的 input-numberstring-
[nzSuffix]带有后缀图标的 input-numberstring-
(nzOnStep)点击上下箭头的回调EventEmitter<NzInputNumberStepEvent>-
(nzFocus)focus 时回调OutputRef<void>-
(nzBlur)blur 时回调OutputRef<void>-
(ngModelChange)值变化时的回调函数EventEmitter<number>-

NzInputNumberStepEvent#

export type NzInputNumberStepEmitter = 'wheel' | 'handler' | 'keyboard';
export interface NzInputNumberStepEvent {
  value: number;
  offset: number;
  type: 'up' | 'down';
  emitter: NzInputNumberStepEmitter;
}

方法#

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

名称描述参数
focus(option?)获取焦点(option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' })
blur()移除焦点-

FAQ#

为何受控模式下,value 可以超出 min 和 max 范围?#

在受控模式下,开发者可能自行存储相关数据。如果组件将数据约束回范围内,会导致展示数据与实际存储数据不一致的情况。这使得一些如表单场景存在潜在的数据问题。