mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 11:58:10 +08:00
152 lines
4.2 KiB
Markdown
Executable File
152 lines
4.2 KiB
Markdown
Executable File
---
|
|
title: Input-Group 输入框组合
|
|
description:
|
|
type: 0
|
|
group: null
|
|
menuName: Input-Group
|
|
icon:
|
|
order: 28
|
|
---
|
|
|
|
**输入框组合选择器** 可用于输入框与其他组件进行组合。
|
|
|
|
## 基本用法
|
|
|
|
```schema: scope="body"
|
|
{
|
|
"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 配置校验方法较为特殊，需要配置下面步骤：
|
|
|
|
1. input-group 上配置任意`name`值 (必填, 否则表单内存在多个输入组合时无法定位)
|
|
2. input-group 的 body 内配置的表单项上配置校验规则
|
|
3. 如果 input-group 的子元素配置了`label`, 则会在校验失败时作为标识符展示, 否则仅使用索引值作为标识符
|
|
4. 单个子元素多条校验信息会使用`; `分隔
|
|
5. 可以使用`"errorMode": "full" | "partial"`设置错误提示风格, `full`整体飘红, `partial`仅错误元素飘红, 默认为`"full"`
|
|
|
|
> 细粒度错误提示需`2.7.1`及以上版本
|
|
|
|
```schema: scope="body"
|
|
{
|
|
"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<[表单项](./formitem)> | | 表单项集合 | |
|
|
| validationConfig | `Record<'errorMode' \| 'delimiter', any>` | - | 校验相关配置, 具体配置属性如下 | `2.8.0` |
|
|
| +errorMode | `"full" \| "partial"` | `"full"` | 错误提示风格, `full`整体飘红, `partial`仅错误元素飘红 | `2.8.0` |
|
|
| +delimiter | `string` | `"; "` | 单个子元素多条校验信息的分隔符 | `2.8.0` |
|