mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-10 17:02:18 +08:00
4.2 KiB
Executable File
4.2 KiB
Executable File
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
Input-Group 输入框组合 | 0 | null | Input-Group | 28 |
输入框组合选择器 可用于输入框与其他组件进行组合。
基本用法
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"type": "input-group",
"name": "input-group",
"label": "input 组合",
"body": [
{
"type": "input-text",
"placeholder": "搜索作业ID/名称",
"inputClassName": "b-r-none p-r-none",
"name": "input-group"
},
{
"type": "submit",
"label": "搜索",
"level": "primary"
}
]
},
{
"type": "input-group",
"label": "各种组合",
"body": [
{
"type": "select",
"name": "memoryUnits",
"options": [
{
"label": "Gi",
"value": "Gi"
},
{
"label": "Mi",
"value": "Mi"
},
{
"label": "Ki",
"value": "Ki"
}
],
"value": "Gi"
},
{
"type": "input-text",
"name": "memory"
},
{
"type": "select",
"name": "memoryUnits2",
"options": [
{
"label": "Gi",
"value": "Gi"
},
{
"label": "Mi",
"value": "Mi"
},
{
"label": "Ki",
"value": "Ki"
}
],
"value": "Gi"
},
{
"type": "button",
"label": "Go"
}
]
}
]
}
校验
input-group 配置校验方法较为特殊,需要配置下面步骤:
- input-group 上配置任意
name
值 (必填, 否则表单内存在多个输入组合时无法定位) - input-group 的 body 内配置的表单项上配置校验规则
- 如果 input-group 的子元素配置了
label
, 则会在校验失败时作为标识符展示, 否则仅使用索引值作为标识符 - 单个子元素多条校验信息会使用
;
分隔 - 可以使用
"errorMode": "full" | "partial"
设置错误提示风格,full
整体飘红,partial
仅错误元素飘红, 默认为"full"
细粒度错误提示需
2.7.1
及以上版本
{
"type": "form",
"debug": true,
"api": "/api/mock2/form/saveForm",
"body": [
{
"type": "input-group",
"name": "input-group",
"label": "输入组合校验",
"body": [
{
"type": "input-text",
"placeholder": "请输入长度不超过6的数字类型",
"name": "group-input1",
"label": "子元素一",
"validations": {
"isNumeric": true,
"maxLength": 6
},
},
{
"type": "input-text",
"placeholder": "请输入长度不少于5的文本",
"name": "group-input2",
"required": true,
"validations": {
"minLength": 5
}
}
]
}
]
}
属性表
属性名 | 类型 | 默认值 | 说明 | 版本 |
---|---|---|---|---|
className | string |
CSS 类名 | ||
body | Array<表单项> | 表单项集合 | ||
validationConfig | Record<'errorMode' | 'delimiter', any> |
- | 校验相关配置, 具体配置属性如下 | 2.8.0 |
+errorMode | "full" | "partial" |
"full" |
错误提示风格, full 整体飘红, partial 仅错误元素飘红 |
2.8.0 |
+delimiter | string |
"; " |
单个子元素多条校验信息的分隔符 | 2.8.0 |