基本

无边框

三种大小

不可用

小数

InputNumberLegacy数字输入框

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

⚠️ InputNumberLegacy 已在 v19.0.0 中废弃，请使用新版 InputNumber 组件。

何时使用#

当需要获取标准数值时。

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

代码演示

基本

数字输入框。

      加载中

三种大小

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

      加载中

小数

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

      加载中

精度

指定 value 的精度

      加载中

cascader

前置/后置标签

用于配置一些固定组合。

      加载中

Zhejiang

输入框组合

数字输入框的组合展现。

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

警告：该用法在 v19 中被弃用，请使用 <nz-space> 或 <nz-space-compact> 组件来实现输入框组合。

      加载中

无边框

没有边框。

      加载中

不可用

点击按钮切换可用状态。

      加载中

格式化展示

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

      加载中

自定义状态

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

      加载中

￥

前缀

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

      加载中

API#

nz-input-numbercomponent#

成员	说明	类型	默认值
`[ngModel]`	当前值，可双向绑定	`number \| string`	`string`
`[nzAutoFocus]`	自动获取焦点	`boolean`	`false`
`[nzDisabled]`	禁用	`boolean`	`false`
`[nzReadOnly]`	只读	`boolean`	`false`
`[nzMax]`	最大值	`number`	`Infinity`
`[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 \| string`	`1`
`[nzInputMode]`	提供了用户在编辑元素或其内容时可能输入的数据类型的提示，详见MDN	`string`	`decimal`
`[nzPlaceHolder]`	选择框默认文字	`string`	-
`[nzId]`	组件内部 input 的 id 值	`string`	-
`(ngModelChange)`	数值改变时回调	`EventEmitter<number>`	-
`(nzFocus)`	focus 时回调	`EventEmitter<void>`	-
`(nzBlur)`	blur 时回调	`EventEmitter<void>`	-

nz-input-number-groupcomponent#

参数	说明	类型	默认值
`[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-number	`string`	-
`[nzSuffixIcon]`	带有后缀图标的 input-number	`string`	-
`[nzCompact]`	是否用紧凑模式	`boolean`	`false`
`[nzSize]`	`nz-input-number-group` 中所有的 `nz-input-number` 的大小	`'large' \| 'small' \| 'default'`	`'default'`
`[nzStatus]`	设置校验状态	`'error' \| 'warning'`	-

方法#

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

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