mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
fix: 修复表单项校验动作类型判断及editor中outputVar问题 (#9120)
Co-authored-by: jinye <jinye@baidu.com>
This commit is contained in:
lmaomaoz
GitHub
parent
3b3b3e8ed7
commit
917753e6cf
@ -1448,16 +1448,17 @@ Form 支持轮询初始化接口，步骤如下：
|
||||
|
||||
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
|
||||
|
||||
| 动作名称 | 动作配置 | 说明 |
|
||||
| --------- | --------------------------------------------------- | -------------------------- |
|
||||
| validate | `outputVar: string` 校验结果，默认为 validateResult | 校验表单 |
|
||||
| submit | `outputVar: string` 提交结果，默认为 submitResult | 提交表单 |
|
||||
| setValue | `value: object` 更新的表单数据 | 更新数据，对数据进行 merge |
|
||||
| reload | - | 刷新（重新加载） |
|
||||
| reset | - | 重置表单 |
|
||||
| clear | - | 清空表单 |
|
||||
| static | - | 表单切换为静态展示 |
|
||||
| nonstatic | - | 表单切换为普通输入态 |
|
||||
| 动作名称 | 动作配置 | 说明 |
|
||||
| ---------------- | --------------------------------------------------------------------------------------------------------- | -------------------------- |
|
||||
| validate | `outputVar: string` 校验结果，默认为 validateResult | 校验表单 |
|
||||
| submit | `outputVar: string` 提交结果，默认为 submitResult | 提交表单 |
|
||||
| setValue | `value: object` 更新的表单数据 | 更新数据，对数据进行 merge |
|
||||
| reload | - | 刷新（重新加载） |
|
||||
| reset | - | 重置表单 |
|
||||
| clear | - | 清空表单 |
|
||||
| static | - | 表单切换为静态展示 |
|
||||
| nonstatic | - | 表单切换为普通输入态 |
|
||||
| validateFormItem | `componentId: string` 要校验的表单项的 id;<br>`outputVar: string` 校验结果，默认为 validateFormItemResult | 校验表单项 |
|
||||
|
||||
### validate
|
||||
|
||||
@ -1957,3 +1958,74 @@ Form 支持轮询初始化接口，步骤如下：
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### validateFormItem
|
||||
|
||||
> 3.6.4 及以上版本
|
||||
|
||||
对单个表单项进行校验，通过配置`actionType: 'validateFormItem'`实现表单项的校验
|
||||
校验结果默认缓存在`${event.data.validateFormItemResult}`中，可以通过添加`outputVar`配置来修改缓存的变量
|
||||
|
||||
校验结果的结构如下：
|
||||
|
||||
```json
|
||||
{
|
||||
// 校验结果，非空表示失败
|
||||
"error": "错误信息",
|
||||
// 校验的表单项的值
|
||||
"value": ""
|
||||
}
|
||||
```
|
||||
|
||||
```schema
|
||||
{
|
||||
type: 'page',
|
||||
title: '更新表单数据',
|
||||
body: [
|
||||
{
|
||||
type: 'form',
|
||||
title: '表单',
|
||||
wrapWithPanel: false,
|
||||
body: [
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '必填项',
|
||||
name: 'required',
|
||||
id: 'required',
|
||||
required: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "input-text",
|
||||
"name": "validate_info",
|
||||
"id": "validate_info",
|
||||
"label": "校验结果：",
|
||||
"static": true
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
label: '校验',
|
||||
level: 'primary',
|
||||
className: 'mt-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'validateFormItem',
|
||||
componentId: 'required'
|
||||
},
|
||||
{
|
||||
"actionType": "setValue",
|
||||
"componentId": "validate_info",
|
||||
"args": {
|
||||
"value": "${event.data.validateFormItemResult|json}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
@ -2023,62 +2023,6 @@ run action ajax
|
||||
|
||||
> 备注：componentId 是全局定位指定的组件，而 componentName 是就近按照层级向上查找。
|
||||
|
||||
### 校验表单项
|
||||
|
||||
> 3.6.4 及以上版本
|
||||
|
||||
对单个表单项进行校验，通过配置`actionType: 'validateFormItem'`实现表单项的校验
|
||||
|
||||
**注意事项**
|
||||
|
||||
- 目标组件支持范围：`formItem` 类型组件
|
||||
|
||||
```schema
|
||||
{
|
||||
type: 'page',
|
||||
title: '更新表单数据',
|
||||
body: [
|
||||
{
|
||||
type: 'form',
|
||||
title: '表单',
|
||||
wrapWithPanel: false,
|
||||
body: [
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '必填项',
|
||||
name: 'required',
|
||||
id: 'required',
|
||||
required: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
label: '校验',
|
||||
level: 'primary',
|
||||
className: 'mt-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'validateFormItem',
|
||||
componentId: 'required'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**属性**
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------------------- | ------------------ | ------ | ----------------------------- |
|
||||
| actionType | `validateFormItem` | - | - |
|
||||
| componentId 或 componentName | `string` | - | 指定赋值的目标组件 id 或 name |
|
||||
|
||||
### 自定义 JS
|
||||
|
||||
通过配置`actionType: 'custom'`实现自定义 JS。JS 中可以访问以下对象和方法：
|
||||
|
||||
@ -6,6 +6,7 @@ import {
|
||||
ListenerContext,
|
||||
registerAction
|
||||
} from './Action';
|
||||
import {getRendererByName} from '../factory';
|
||||
|
||||
export interface ICmptAction extends ListenerAction {
|
||||
actionType: string;
|
||||
@ -93,7 +94,10 @@ export class CmptAction implements RendererAction {
|
||||
}
|
||||
|
||||
// 校验表单项
|
||||
if (action.actionType === 'validateFormItem') {
|
||||
if (
|
||||
action.actionType === 'validateFormItem' &&
|
||||
getRendererByName(component?.props?.type)?.isFormItem
|
||||
) {
|
||||
const {dispatchEvent, data} = component?.props || {};
|
||||
try {
|
||||
const valid = await component?.props.onValidate?.();
|
||||
@ -122,13 +126,14 @@ export class CmptAction implements RendererAction {
|
||||
event.setData(
|
||||
createObject(event.data, {
|
||||
[action.outputVar || `${action.actionType}Result`]: {
|
||||
error: e.message,
|
||||
error: e.message || '未知错误',
|
||||
value: component?.props?.formItem?.value
|
||||
}
|
||||
})
|
||||
);
|
||||
dispatchEvent && dispatchEvent('formItemValidateError', data);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// 执行组件动作
|
||||
|
||||
@ -1773,14 +1773,14 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
'如需执行多次表单校验，可以修改此变量名用于区分不同的校验结果',
|
||||
mode: 'horizontal',
|
||||
size: 'lg',
|
||||
value: 'validateResult',
|
||||
value: 'validateFormItemResult',
|
||||
required: true
|
||||
}
|
||||
],
|
||||
outputVarDataSchema: [
|
||||
{
|
||||
type: 'object',
|
||||
title: 'validateResult',
|
||||
title: 'validateFormItemResult',
|
||||
properties: {
|
||||
error: {
|
||||
type: 'string',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user