FormCreate

Appearance

组件动态联动教程 ​

在表单开发中，经常需要实现组件之间的联动行为，例如当某个输入框的值满足特定条件时，动态显示或隐藏其他组件。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;
  //控制对应规则的显示,禁用,必填
  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;
}>

注意: handle优先级大于value

method 选项 ​

键名配置项说明
if/hidden条件渲染控制组件的显示/隐藏状态
required必填验证设置字段是否为必填项
disabled/enabled禁用状态控制组件是否可交互
display显示状态控制组件的显示状态(会渲染 DOM)

注意: 由于一些原因,当前hidden值为true 时会显示组件. disabled为true时组件会可用, 逻辑刚好和名称相反了. 为了更好的语义化, 我们增加了if 和 enabled

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}$' (不需要前后的"/")

在线示例 ​

当评价小于3星时输入差评原因 ​

当input3输入值后插入text4 ​

当输入 child 时追加插槽 ​

当输入 required 时field2必填 ​

同时多个control生效 ​

很多示例 ​

当组件的值和value全等时加载rule中的组件到表单尾部 ​

js
{
    value:1,
    rule:[{type:'input', field:'field',title:'field'}]
}

当handle方法返回true时加载rule中的组件到尾部 ​

js
{
    handle:function(val, fApi){
        return val === 1
    },
    rule:[{type:'input', field:'field',title:'field'}]
}

控制当前表单中对应的field/name组件是否显示 ​

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

控制当前表单中对应的field/name组件是否禁用 ​

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

当value!=组件值时加载rule中的组件到表单尾部 ​

js
{
    value: 1,
    condition: '!=',
    rule:[{type:'input', field:'field',title:'field'}]
}

条件成立后将rule中的规则追加到goods_name后的位置 ​

js
{
    value:1,
    append:'goods_name',
    rule:[{type:'input', field:'field',title:'field'}]
}

条件成立后将rule中的规则插入到goods_name前的位置 ​

js
{
    value:1,
    prepend:'goods_name',
    rule:[{type:'input', field:'field',title:'field'}]
}

条件成立后将rule 插入到goods_name组件的children中 ​

js
{
    value:1,
    prepend:'goods_name',
    child: true,
    rule:[{type:'input', field:'field',title:'field'}]
}

业务场景示例 ​

根据单选框选择控制表单显示 ​

在实际业务中，常常需要根据用户的选择动态展示不同的表单字段。以下示例展示了如何使用 control 根据单选框的选择值来控制其他字段的显示与隐藏。

js
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 输入框。

根据用户输入的值控制字段是否必填 ​

有时候，某个字段的必填状态取决于用户在另一个字段中的输入。例如，如果用户输入的金额超过某个值，系统会要求提供额外的备注。

js
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 字段将变为必填项。

根据复选框选中情况动态显示多个字段 ​

当用户在复选框中选择多个选项时，表单可以动态显示与选项相关联的多个字段。

js
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: '喜欢的音乐类型' }]
      }
    ]
  }
];

此示例中，用户选择 阅读、运动 或 音乐 时，将分别显示对应的输入框，要求用户填写具体的内容。

根据日期选择控制时间选择器的可用状态 ​

在一些场景下，用户选择的日期可能会影响表单中其他字段的可用性。例如，选择未来日期时，时间选择器才会启用。

js
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 字段的时间选择器才会启用。

根据用户选择的商品类别动态加载对应的属性字段 ​

假设一个电商系统中，用户在添加商品时需要选择商品的类别，不同类别的商品有不同的属性。可以通过组件联动功能动态加载对应的属性字段。

js
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 配置多条件逻辑来控制字段的显示：

js
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”折扣代码时，“信用卡号”字段会被设为必填项。这是一个多条件组合控制字段显示的典型场景。

通过 control 配置项，您可以轻松实现表单中各个组件之间的复杂联动逻辑，极大提升表单的动态性与用户体验。无论是简单的显示隐藏，还是复杂的条件加载，都可以通过上述方式进行配置。

FormCreate 是一个开源项目，基于 MIT 许可证发布，欢迎个人和企业用户免费使用

MIT Licensed | Copyright © 2018-present FormCreate
陕ICP备2024036423号-1