Input输入框

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

何时使用#

  • 需要用户输入表单域内容时。
  • 提供组合型输入框,带搜索的输入框,还可以进行大小选择。
import { NzInputModule } from 'ng-zorro-antd/input';

代码演示



基本使用。

expand codeexpand code
加载中
Http://.com
Http://.com

用于配置一些固定组合。

expand codeexpand code
加载中




带有搜索按钮的输入框。

expand codeexpand code
加载中

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

expand codeexpand code
加载中


RMB

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

expand codeexpand code
加载中


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

expand codeexpand code
加载中

展示数字提示。

expand codeexpand code
加载中

我们为 nz-input 输入框定义了三种尺寸(大、默认、小),高度分别为 40px32px24px

注意: 在表单里面,我们只使用大尺寸的输入框。

expand codeexpand code
加载中


Zhejiang
Option1


Option1-1Option2-1
Between
Sign Up
Home

输入框的组合展现。

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

expand codeexpand code
加载中

用于多行输入。

expand codeexpand code
加载中

结合 Tooltip 组件,实现一个数值输入框,方便内容超长时的全量展现。

expand codeexpand code
加载中

密码框。

expand codeexpand code
加载中

没有边框。

expand codeexpand code
加载中

API#

[nz-input]#

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]是否隐藏边框booleanfalse

nz-input-group#

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

nz-textarea-count#

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