amis2/docs/zh-CN/components/form/input-text.md

title	description	type	group	menuName	icon	order
InputText 输入框		0	null	InputText 输入框		56

基本使用

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "name": "text",
            "type": "input-text",
            "label": "text"
        }
    ]
}

不同类型

配置type可以支持不同格式的文本输入框

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "name": "text",
            "type": "input-text",
            "label": "text"
        },
        {
            "type": "divider"
        },
        {
            "type": "input-url",
            "name": "url",
            "label": "链接"
        },
        {
            "type": "divider"
        },
        {
            "type": "input-email",
            "name": "email",
            "label": "邮箱"
        },
        {
            "type": "divider"
        },
        {
            "type": "input-password",
            "name": "password",
            "label": "密码"
        }
    ]
}

附加组件

可以配置addOn，附带附加组件，比如 button，还能设置 icon。

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "name": "text",
            "type": "input-text",
            "label": "text",
            "addOn": {
                "type": "button",
                "icon": "https://suda.cdn.bcebos.com/images%2F2021-01%2Fsearch.svg",
                "label": "搜索"
            }
        }
    ]
}

可清除

通过 "clearable": true 可以设置文本可清除

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "name": "text",
            "type": "input-text",
            "label": "text",
            "clearable": true
        }
    ]
}

选择器模式

配置options即可支持选择器模式。

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "name": "text",
            "type": "input-text",
            "label": "text",
            "options": [
                {
                    "label": "aa",
                    "value": "aa"
                },
                {
                    "label": "bb",
                    "value": "bb"
                },
                {
                    "label": "cc",
                    "value": "cc"
                },
                {
                    "label": "dd",
                    "value": "dd"
                }
            ]
        }
    ]
}

选择器模式下，支持部分选择器组件支持的配置项，具体请查看下面的属性表。如：source 和 autoComplete 都支持

限制只能选择预设

配置 options 并且配置 creatable: false

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "name": "text",
            "type": "input-text",
            "label": "text",
            "creatable": false,
            "options": [
                {
                    "label": "OptionA",
                    "value": "a"
                },
                {
                    "label": "OptionB",
                    "value": "b"
                },
                {
                    "label": "OptionC",
                    "value": "c"
                },
                {
                    "label": "OptionD",
                    "value": "d"
                }
            ]

        }
    ]
}

多选模式

配置 multiple: true

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "debug": true,
    "body": [
        {
            "name": "text",
            "type": "input-text",
            "label": "text",
            "multiple": true,
            "options": [
                {
                    "label": "OptionA",
                    "value": "a"
                },
                {
                    "label": "OptionB",
                    "value": "b"
                },
                {
                    "label": "OptionC",
                    "value": "c"
                },
                {
                    "label": "OptionD",
                    "value": "d"
                }
            ]

        }
    ]
}

前缀和后缀

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "data": {
        "unit": "MB"
    },
    "body": [
        {
            "name": "text",
            "type": "input-text",
            "label": "text",
            "prefix": "￥",
            "suffix": "RMB"
        },
        {
            "name": "prefix",
            "type": "input-text",
            "label": "text",
            "prefix": "￥"
        },
        {
            "name": "suffix",
            "type": "input-text",
            "label": "text",
            "suffix": "${unit}"
        }
    ]
}

支持数据映射

显示计数器

{
    "type": "form",
    "body": [
        {
            "name": "a",
            "type": "input-text",
            "label": "A",
            "showCounter": true,
            "placeholder": "请输入"
        },
        {
            "name": "b",
            "type": "input-text",
            "label": "B",
            "showCounter": true,
            "maxLength": 100,
            "placeholder": "请输入"
        }
    ]
}

自动转换值

可以配置 transform，来自动转换值，支持转小写或大写。

{
  "type": "form",
  "body": [
    {
      "name": "a",
      "type": "input-text",
      "label": "A",
      "placeholder": "输入的英文自动转为小写",
      "transform": {
        "lowerCase": true
      }
    },
    {
      "name": "b",
      "type": "input-text",
      "label": "B",
      "placeholder": "输入的英文自动转为大写",
      "transform": {
        "upperCase": true
      }
    }
  ]
}

属性表

当做选择器表单项使用时，除了支持 普通表单项属性表 中的配置以外，还支持下面一些配置

属性名	类型	默认值	说明
options	Array<object>或Array<string>		选项组
source	string或 API		动态选项组
autoComplete	string或 API		自动补全
multiple	boolean		是否多选
delimiter	string	,	拼接符
labelField	string	"label"	选项标签字段
valueField	string	"value"	选项值字段
joinValues	boolean	true	拼接值
extractValue	boolean	false	提取值
addOn	addOn		输入框附加组件，比如附带一个提示文字，或者附带一个提交按钮。
addOn.type	string		请选择 text 、button 或者 submit。
addOn.label	string		文字说明
addOn.position	'left' | 'right'	'right'	addOn 位置
addOn.xxx	string		其他参数请参考按钮文档
trimContents	boolean		是否去除首尾空白文本。
creatable	boolean		是否可以创建，默认为可以，除非设置为 false 即只能选择选项中的值
clearable	boolean		是否可清除
resetValue	string	""	清除后设置此配置项给定的值。
prefix	string	""	前缀
suffix	string	""	后缀
showCounter	boolean		是否显示计数器
minLength	number		限制最小字数
maxLength	number		限制最大字数
transform	object		自动转换值，可选 transform: { lowerCase: true, upperCase: true }

事件表

事件名称	事件参数	说明
click	value: string	点击
focus	value: string	获取焦点
blur	value: string	失去焦点
enter	value: string	回车
change	value: string	值变化

动作表

动作名称	动作配置	说明
clear	-	清空
reset	-	重置
focus	-	获取焦点
reload	-	刷新（重新加载），只针对配置了source的输入框有效
setValue	value: string 更新的值	更新数据，开启multiple多选时用,分隔