前置/后置标签

搜索框 loading

适应文本高度的文本域

一次性密码框

输入时格式化展示

前缀和后缀

带移除图标

带数字提示的文本域

自定义状态

Input 输入框

通过鼠标或键盘输入内容，是最基础的表单域的包装。

使用

源码

components/input

文档

何时使用#

需要用户输入表单域内容时。
提供组合型输入框，带搜索的输入框，还可以进行大小选择。

代码演示#

基本使用。

      加载中

Input 形态变体，可选 outlined、filled、borderless、underlined 四种形态。

      加载中

20.0.0

https://

Zhejiang

使用 <nz-space-compact> 创建紧凑模式，更多请查看文档。

      加载中

20.4.0

搜索框 loading

用于 nzSearch 的时候展示 loading。

      加载中

20.4.0

适应文本高度的文本域

nzAutosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 nzAutosize 可以设定为一个对象，指定最小行数和最大行数。

      加载中

密码框。

      加载中

20.4.0

带数字提示的文本域

展示数字提示。

      加载中

我们为 nz-input 输入框定义了三种尺寸（大、默认、小），高度分别为 40px、32px 和 24px。

      加载中

http://.com

Http://

.com

http://.com

cascader

前置/后置标签

用于配置一些固定组合。

      加载中

https://

带有搜索按钮的输入框。

      加载中

20.4.0

用于多行输入。

      加载中

With Formatter (Uppercase)

With Disabled

With Length (8)

With custom display character

一次性密码框

一次性密码输入框。

      加载中

¥RMB

¥RMB

前缀和后缀

在输入框上添加前缀或后缀图标。

      加载中

带移除图标

带移除图标的输入框，点击图标删除所有内容。

      加载中

20.4.0

自定义状态

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

      加载中

API#

[nz-input]directive#

[nz-input] 可以使用所有的 W3C 标准下的所有使用方式和 Angular 对 input 的全部额外功能支持。

参数	说明	类型	默认值	版本
`[nzSize]`	控件大小。注：标准表单内的输入框大小限制为 `large`	`'large' \| 'small' \| 'default'`	`'default'`
`[nzAutosize]`	只可以用于 `textarea`，自适应内容高度，可设置为 `boolean` 或对象：`{ minRows: 2, maxRows: 6 }`	`boolean \| { minRows: number, maxRows: number }`	`false`
~~`[nzBorderless]`~~	~~是否隐藏边框~~	~~`boolean`~~	~~`false`~~
`[nzVariant]`	形态变体	`'outlined' \| 'borderless' \| 'filled' \| 'underlined'`	`'outlined'`	20.0.0
`[nzStatus]`	设置校验状态	`'error' \| 'warning'`	-

nz-input-wrappercomponent#

当需要为 [nz-input] 添加额外功能时使用。

参数	说明	类型	默认值
`[nzAddonBefore]`	带标签的 input，设置前置标签	`string`	-
`[nzAddonAfter]`	带标签的 input，设置后置标签	`string`	-
`[nzPrefix]`	带有前缀图标的 input	`string`	-
`[nzSuffix]`	带有后缀图标的 input	`string`	-
`[nzAllowClear]`	可以点击清除图标删除内容	`boolean`	`false`
`(nzClear)`	点击清除图标时触发	`OutputEmitterRef<void>`	-

nz-input-passwordcomponent#

可使用 nz-input-wrapper 的所有属性。

参数	说明	类型	默认值
`[nzVisibilityToggle]`	是否显示切换按钮	`boolean`	`true`
`[nzVisible]`	是否显示密码，支持双向绑定	`boolean`	`false`
`(nzVisibleChange)`	是否显示密码变更事件	`OutputEmitterRef<boolean>`	-

nz-input-searchcomponent#

可使用 nz-input-wrapper 的所有属性。

参数	说明	类型	默认值
`[nzEnterButton]`	是否有确认按钮，可设为按钮文字。该属性会与 `nzAddonAfter` 冲突。	`boolean \| string`	`false`
`[nzLoading]`	搜索 loading	`boolean`	`false`
`(nzSearch)`	点击搜索图标、清除图标，或按下回车键时的事件	`{ value: string, event: Event, source: 'clear' \| 'input' }`

nz-input-groupcomponent#

⚠️ nz-input-group 已在 v20.0.0 中废弃，将在 v22.0.0 中移除，请使用 nz-input-wrapper 组件。

参数	说明	类型	默认值
`[nzAddOnAfter]`	带标签的 input，设置后置标签，可以与 `nzAddOnBefore` 配合使用	`string \| TemplateRef<void>`	-
`[nzAddOnBefore]`	带标签的 input，设置前置标签，可以与 `nzAddOnAfter` 配合使用	`string \| TemplateRef<void>`	-
`[nzPrefix]`	带有前缀图标的 input，可以与 `nzSuffix` 配合使用	`string \| TemplateRef<void>`	-
`[nzSuffix]`	带有后缀图标的 input，可以与 `nzPrefix` 配合使用	`string \| TemplateRef<void>`	-
`[nzSearch]`	是否用搜索框	`boolean`	`false`
`[nzSize]`	`nz-input-group` 中所有的 `nz-input` 的大小	`'large' \| 'small' \| 'default'`	`'default'`
`[nzStatus]`	设置校验状态	`'error' \| 'warning'`	-

nz-textarea-countcomponent#

参数	说明	类型	默认值
`[nzMaxCharacterCount]`	`textarea` 数字提示显示的最大值	`number`	-
`[nzComputeCharacterCount]`	自定义计算 `characterCount` 的函数	`(v: string) => number`	`v => v.length`

nz-input-otpcomponent#

Property	Description	Type	Default
`[disabled]`	是否禁用	boolean	`false`
`[nzFormatter]`	格式化展示，留空字段会被填充	`(value: string) => string`	-
`[nzMask]`	自定义展示，和 `formatter` 的区别是不会修改原始值	`boolean \| null`	`null`
`[nzLength]`	输入元素数量	`number`	`6`
`[nzStatus]`	设置校验状态	`'error' \| 'warning'`	-
`[nzSize]`	输入框大小	`'large' \| 'small' \| 'default'`	`'default'`

Q&A#

如何使用紧凑型输入框组合？#

从 v20 版本开始，nz-input-group 不再直接支持紧凑模式，你可以使用 nz-space-compact 替代。