Skip to content

组件联动

在表单开发中,经常需要实现组件之间的联动行为,例如当某个输入框的值满足特定条件时,动态显示或隐藏其他组件。FormCreate 提供了强大的组件联动功能,通过 control 配置项实现组件的加载、显示、禁用和必填等状态控制。

注意

高级版中推荐使用数据联动和逻辑条件配置替代基础的组件联动方案

control3

数据结构

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 选项

键名运算符说明值类型示例
==全等组件值完全等于valueAnyvalue: 10
!=不全等组件值不等于valueAnyvalue: "error"
<>不全等组件值不等于value(同!=)Anyvalue: false
>大于组件值大于valueNumbervalue: 100
>=大于等于组件值大于等于valueNumbervalue: 18
<小于组件值小于valueNumbervalue: 0
<=小于等于组件值小于等于valueNumbervalue: 100
in包含组件值存在于value数组中Arrayvalue: [1,2,3]
notIn不包含组件值不存在于value数组中Arrayvalue: ["a","b"]
on包含值value存在于组件值(数组)中StringNumber
notOn不包含值value不存在于组件值(数组)中StringNumber
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正则用正则表达式验证组件值Stringvalue:'^1\d{10}$' (不需要前后的"/")

联动示例

实现表单中手机号(Ffb7m8y7e77zalc)与验证码(Ffa7m8y7eu9eaoc)字段的联动显示:当手机号输入不为空时,才展示验证码输入框。

control

在联动数据中配置联动规则

control2

注意:必须严格按指定数据类型配置,否则会触发内容语法错误提示。

更多示例

控制当前表单中对应的自己是否显示

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"]
}]