组件联动

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

数据结构

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

condition 选项

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

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

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

更多示例

控制组件显示状态

通过配置规则来控制表单中特定字段（如field1、field2）的显示状态，当指定条件满足时（例如值为’1’），可以动态显示或隐藏这些相关字段。

[{
    value: '1',
    rule: ['field1', 'field2']
}]

控制组件禁用状态

通过配置规则来控制表单中特定组件（如field1、name2）的禁用状态，当指定条件满足时（例如值为’1’），可以动态启用或禁用这些相关字段的交互功能。

[{
    value: '1',
    method: 'disabled',
    rule: ['field1', 'name2']
}]

计算组件显示状态

使用自定义函数来控制表单字段的显示条件，通过handle方法判断字段值是否为’ok’或’no’，从而动态决定指定字段的显示或隐藏状态。

[{
  "handle": function(val, api) {
    return val === 'ok' || val === 'no';
  },
  "method": "if",
  "rule": ["Ffa7m8y7eu9eaoc"]
}]