[开源]低代码表单FormCreate的control表单联动功能的详解
低代码表单FormCreate 提供了强大的组件联动功能，通过 control 配置项实现组件的加载、显示、禁用和必填等状态控制。在表单开发中，经常需要实现组件之间的联动行为，例如当某个输入框的值满足特定条件时，动态显示或隐藏其他组件。
源码地址: Github | Gitee
数据结构
type Control = Array<{
//通过内置条件控制,和`handle`二选一
value?: any;
//内置的条件,可以和`value`组合使用
condition?: '==' | '!=' | '<>' | '>' | '>=' | '<' | '<=' | 'in' | 'notIn' | 'on' | 'notOn' | 'between' | 'notBetween' | 'empty' | 'notEmpty';
//自定义控制条件
handle?: (val: any, api: Api) => boolean;
//控制对应规则的显示,禁用,必填
method?: 'display' | 'disabled' | 'hidden' | 'required';
//控制的字段
rule: string[];
} | {
//通过内置条件控制,和`handle`二选一
value?: any;
//内置的条件,可以和`value`组合使用
condition?: '==' | '!=' | '<>' | '>' | '>=' | '<' | '<=' | 'in' | 'notIn' | 'on' | 'notOn' | 'between' | 'notBetween' | 'empty' | 'notEmpty';
//自定义控制条件
handle?: (val: any, api: Api) => boolean;
//控制的规则
rule: Rule[];
//条件达成时,将`rule`添加到对应字段后面
append?: string;
//条件达成时,将`rule`添加到对应字段前面
prepend?: string;
//条件达成时,将`rule`添加到对应字段的子级, 不配置`append`和`prepend`时,默认当前规则
child?: boolean;
}>
method 选项
- display: 控制组件的显示状态
- hidden: 控制组件的渲染状态（无 DOM 元素）
- required: 控制组件是否必填
- disabled: 控制组件的禁用状态
condition 选项
- ==: 全等
- !=: 不全等
- <>: 不全等
- >: 组件值大于value
(Number) - >=: 组件值大于等于value
(Number) - >=: 组件值大于等于value
(Number) - <: 组件值小于value
(Number) - <=: 组件值小于等于value
(Number) - in: 组件值存在于value
(Array)中 - notIn: 组件值不存在于value
(Array)中 - on: value存在于组件值
(Array)中 - notOn: value不存在于组件值
(Array)中 - between: 组件值在value
(Array)的区间中,组件值>value[0] && 组件值<value[1] - notBetween: 组件值不在value
(Array)的区间中 - empty: 组件值为空时
- notEmpty: 组件值不为空时
- pattern: 正则表达式验证
属性说明
-
value : 当组件的值和
value全等时加载rule中的组件{ value:1, rule:[{type:'input', field:'field',title:'field'}] } -
handle
Function: 当handle方法返回true时加载rule中的组件{ handle:function(val, fApi){ return val === 1 }, rule:[{type:'input', field:'field',title:'field'}] } -
rule
string[]|Rule[]: 控制当前表单中对应的field/name是否显示{ value: 1, rule: ['field1', 'name2'] } -
method
string: 控制当前表单中对应的field/name是否禁用{ value: 1, method: 'disabled', rule: ['field1', 'name2'] } -
condition
string: 当value!=组件值时加载rule中的组件{ value: 1, condition: '!=', rule:[{type:'input', field:'field',title:'field'}] } -
append
string: 将rule中的规则追加到goods_name后的位置{ value:1, append:'goods_name', rule:[{type:'input', field:'field',title:'field'}] } -
prepend
string: 将rule中的规则插入到goods_name前的位置{ value:1, prepend:'goods_name', rule:[{type:'input', field:'field',title:'field'}] } -
child
boolean: 将rule插入到goods_name组件的children中{ value:1, prepend:'goods_name', child: true, rule:[{type:'input', field:'field',title:'field'}] }
handle优先级大于value
业务场景示例
根据单选框选择控制表单显示
在实际业务中，常常需要根据用户的选择动态展示不同的表单字段。以下示例展示了如何使用 control 根据单选框的选择值来控制其他字段的显示与隐藏。
const rules = [
{
type: 'radio',
field: 'select_option',
title: '选择类型',
value: 'A',
options: [
{ label: '选项A', value: 'A' },
{ label: '选项B', value: 'B' }
],
control: [
{
value: 'A',
rule: [{ type: 'input', field: 'input_A', title: '输入A的内容' }]
},
{
value: 'B',
rule: [{ type: 'input', field: 'input_B', title: '输入B的内容' }]
}
]
}
];
在这个例子中，当用户选择 选项A 时，会动态显示一个名为 input_A 的输入框；而当选择 选项B 时，则显示 input_B 输入框。
根据用户输入的值控制字段是否必填
有时候，某个字段的必填状态取决于用户在另一个字段中的输入。例如，如果用户输入的金额超过某个值，系统会要求提供额外的备注。
const rules = [
{
type: 'input',
field: 'amount',
title: '金额',
value: 0,
control: [
{
handle: (val) => val > 100,
method: 'required',
rule: ['remarks']
}
]
},
{
type: 'input',
field: 'remarks',
title: '备注'
}
];
在此场景中，当 amount 字段的值大于 100 时，remarks 字段将变为必填项。
根据复选框选中情况动态显示多个字段
当用户在复选框中选择多个选项时，表单可以动态显示与选项相关联的多个字段。
const rules = [
{
type: 'checkbox',
field: 'interests',
title: '选择兴趣',
options: [
{ label: '阅读', value: 'reading' },
{ label: '运动', value: 'sports' },
{ label: '音乐', value: 'music' }
],
control: [
{
value: 'reading',
condition: 'on',
rule: [{ type: 'input', field: 'favorite_books', title: '喜欢的书籍' }]
},
{
value: 'sports',
condition: 'on',
rule: [{ type: 'input', field: 'favorite_sport', title: '喜欢的运动' }]
},
{
value: 'music',
condition: 'on',
rule: [{ type: 'input', field: 'favorite_music', title: '喜欢的音乐类型' }]
}
]
}
];
此示例中，用户选择 阅读、运动 或 音乐 时，将分别显示对应的输入框，要求用户填写具体的内容。
根据日期选择控制时间选择器的可用状态
在一些场景下，用户选择的日期可能会影响表单中其他字段的可用性。例如，选择未来日期时，时间选择器才会启用。
const rules = [
{
type: 'datePicker',
field: 'date',
title: '选择日期',
value: '',
control: [
{
handle: (val) => new Date(val) > new Date(),
method: 'disabled',
rule: ['time']
}
]
},
{
type: 'timePicker',
field: 'time',
title: '选择时间'
}
];
在该场景中，只有在用户选择了未来日期时，time 字段的时间选择器才会启用。
根据用户选择的商品类别动态加载对应的属性字段
假设一个电商系统中，用户在添加商品时需要选择商品的类别，不同类别的商品有不同的属性。可以通过组件联动功能动态加载对应的属性字段。
const rules = [
{
type: 'select',
field: 'category',
title: '商品类别',
options: [
{ label: '电子产品', value: 'electronics' },
{ label: '服装', value: 'clothing' }
],
control: [
{
value: 'electronics',
rule: [
{ type: 'input', field: 'brand', title: '品牌' },
{ type: 'input', field: 'model', title: '型号' }
]
},
{
value: 'clothing',
rule: [
{ type: 'input', field: 'size', title: '尺寸' },
{ type: 'input', field: 'material', title: '材质' }
]
}
]
}
];
在这个例子中，选择 电子产品 会动态显示品牌和型号字段，而选择 服装 则会显示尺寸和材质字段。
基于多条件组合控制字段显示
有时，表单字段的显示取决于多个条件的组合。以下示例展示了如何使用 control 配置多条件逻辑来控制字段的显示：
const rules = [
{
type: 'select',
field: 'subscription_type',
title: '选择订阅类型',
options: [
{ label: '基础版', value: 'basic' },
{ label: '高级版', value: 'premium' }
]
},
{
type: 'input',
field: 'discount_code',
title: '折扣代码'
},
{
type: 'input',
field: 'credit_card',
title: '信用卡号',
link: ['discount_code'],
control: [
{
value: 'premium',
handle: (val, fApi) => {
const discountCode = fApi.getValue('discount_code');
return val === 'premium' && discountCode === 'VIP';
},
method: 'required',
rule: ['credit_card']
}
]
}
];
在这个例子中，当用户选择“高级版”订阅并且输入“VIP”折扣代码时，“信用卡号”字段会被设为必填项。这是一个多条件组合控制字段显示的典型场景。