组件联动
在表单开发中,经常需要实现组件之间的联动行为,例如当某个输入框的值满足特定条件时,动态显示或隐藏其他组件。FormCreate 提供了强大的组件联动功能,通过 control 配置项实现组件的加载、显示、禁用和必填等状态控制。
注意
高级版中推荐使用数据联动和逻辑条件配置替代基础的组件联动方案
数据结构
ts
type Control = Array<{
//通过内置条件控制,和`handle`二选一
value?: any;
//内置的条件,可以和`value`组合使用
condition?: '==' | '!=' | '<>' | '>' | '>=' | '<' | '<=' | 'in' | 'notIn' | 'on' | 'notOn' | 'between' | 'notBetween' | 'empty' | 'notEmpty';
//自定义控制条件
handle?: (val: any, api: Api) => boolean;
//控制对应规则的显示,禁用,必填. 默认值为 if
method?: 'if' | 'enabled' | 'required';
//控制的字段,(对应组件的字段ID或者编号)
rule: string[];
}>
注意:组件值必须与 value 严格全等(包括数据类型完全一致)。
method 选项
键名 | 配置项 | 说明 |
---|---|---|
if | 条件渲染 | 控制组件的显示/隐藏状态 |
required | 必填验证 | 设置字段是否为必填项 |
disabled | 禁用状态 | 控制组件是否可交互 |
condition 选项
键名 | 运算符 | 说明 | 值类型 | 示例 |
---|---|---|---|---|
== | 全等 | 组件值完全等于value | Any | value: 10 |
!= | 不全等 | 组件值不等于value | Any | value: "error" |
<> | 不全等 | 组件值不等于value(同!=) | Any | value: false |
> | 大于 | 组件值大于value | Number | value: 100 |
>= | 大于等于 | 组件值大于等于value | Number | value: 18 |
< | 小于 | 组件值小于value | Number | value: 0 |
<= | 小于等于 | 组件值小于等于value | Number | value: 100 |
in | 包含 | 组件值存在于value数组中 | Array | value: [1,2,3] |
notIn | 不包含 | 组件值不存在于value数组中 | Array | value: ["a","b"] |
on | 包含值 | value存在于组件值(数组)中 | String | Number |
notOn | 不包含值 | value不存在于组件值(数组)中 | String | Number |
between | 区间内 | 组件值在value[0]和value[1]之间 | Array[2] | value: [10,20] |
notBetween | 区间外 | 组件值不在value[0]和value[1]之间 | Array[2] | value: [0,100] |
empty | 为空 | 组件值为空时通过验证 | - | value: true |
notEmpty | 非空 | 组件值不为空时通过验证 | - | value: true |
pattern | 正则 | 用正则表达式验证组件值 | String | value:'^1\d{10}$' (不需要前后的"/") |
联动示例
实现表单中手机号(Ffb7m8y7e77zalc)与验证码(Ffa7m8y7eu9eaoc)字段的联动显示:当手机号输入不为空时,才展示验证码输入框。
在联动数据中配置联动规则
注意:必须严格按指定数据类型配置,否则会触发内容语法错误提示。
更多示例
控制当前表单中对应的自己是否显示
js
[{
value: '1',
rule: ['field1', 'field2']
}]
控制当前表单中对应的自己是否禁用
js
[{
value: '1',
method: 'disabled',
rule: ['field1', 'name2']
}]
控制当前表单中对应的自己是否必填
ts
[{
value: '1',
method: 'required',
rule: ['field1']
}]
自定义条件
js
[{
"handle": function(val, api) {
return val === 'ok' || val === 'no';
},
"method": "if",
"rule": ["Ffa7m8y7eu9eaoc"]
}]