通过鼠标或键盘输入内容,是最基础的表单域的包装。
需要用户输入表单域内容时。
提供组合型输入框,带搜索的输入框,还可以进行大小选择。
基本使用。
用于配置一些固定组合
带有搜索按钮的输入框。
nzAutosize
属性适用于 textarea
节点,并且只有高度会自动变化。另外 nzAutosize
可以设定为一个对象,指定最小行数和最大行数。
在输入框上添加前缀或后缀图标。
我们为 nz-input
输入框定义了三种尺寸(大、默认、小),高度分别为 32px
、28px
和 22px
。
注意: 在表单里面,我们只使用大尺寸的输入框。
输入框的组合展现。
用于多行输入,指定 nzType
为一个特殊的 textarea
。可以用 nzRows
或是 nzAutosize
来控制框的高度。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
ngModel | 当前input数值,可以双向绑定 | String | - |
nzType | 【必须】声明 input 类型,同原生 input 标签的 type 属性。另外提供 nzType="textarea" 。 |
String | 'text' |
nzPlaceHolder | 在文字框中显示提示讯息 | String | 无 |
nzSize | 控件大小,默认值为 default 。注:标准表单内的输入框大小限制为 large。 | 'large'|'default'|'small' | 'default' |
nzDisabled | 是否禁用状态,默认为 false | bool | false |
nzReadonly | 是否只读状态,默认为 false | bool | false |
nzBlur | 失去焦点回调 | EventEmitter | 无 |
nzFocus | 获取焦点回调 | EventEmitter | 无 |
#addonBefore | 设置前置标签 | ng-template | - |
#addonAfter | 设置后置标签 | ng-template | - |
#prefix | 带有前缀图标的 input | ng-template | - |
#suffix | 带有后缀图标的 input | ng-template | - |
当 nzType="textarea"
时,特有的API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
nzAutosize | 自适应内容高度,可设置为 true|false 或对象:{{'{ minRows: 2, maxRows: 6 }'}} |
Boolean|Object | false |
nzRows | 控制固定框的行数 | String | 无 |
当 nzType="search"
时,特有的API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
nzOnSearch | 回车或点击搜索按钮时的回调 | EventEmitter<string> | - |
在nz-input-group中需要使用[nz-input]的directive,而非component进行组合,具体见demo
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
nzSize | nz-input-group 中所有的 nz-input 的大小 |
'large'|'default'|'small' | 'default' |
nzCompact | 是否用紧凑模式 | Boolean | false |