antd扩展动态表单formake，支持事件配置和复杂嵌套

目录

背景

简介：

基本使用

嵌套形式

拖拽生成form

事件配置

formake扩展

formke开源

---

背景

表单在实际业务中应用非常广泛，它的主要功能是录入信息，提供业务数字化的基础，在各种中台系统中，有着大量的表单。从其功定位可以看出，很多中台系统主要依赖于服务端开发，前端的功能主要是展示和信息录入，但是在实际业务开发中，又必须投入大量开发资源。

基于降本增效的理念，引入动态表单是非常必要的，表单配置化，可以加快前端的开发速度或者给服务端开发者赋能。

在研发智能页面搭建平台——智慧PG(pgting)过程中，我们设计和研发了一款开源的动态表单生成器formake，并支持拖拽生成表单。

简介：

formake 是一款动态表单生成器，基于 react(16.10 以上), antd(5.x)开发，继承了 antd 组件接口，并在此基础上添加了扩展。该库提供了多种应用方式，可以传入json生成表单，也可以根据json生成部分表单，其余动态嵌入。

formake有两个核心点：一是事件配置化，二是复杂嵌套。其事件配置启发于 react, react 用数据对象描述页面，formake 用数据对象述事件。其次，formake 支持表单多种形式嵌套组合，掌握 api 后，可以快捷生成不同类型地表单。

formake提供了拖拽编辑器，通过拖拽即可生成表单DSL，免去了配置json的烦恼。

formake 中文文档：
https://www.pgting.com/pg-doc/formake

formake 编辑器地址：智慧PG

下面是formake配置生成表单实例：

基本使用

import React from 'react';
import { GenerateForm, useWatchForm } from 'formake';
// ...
const [form] = useWatchForm(); // 也可以使用antd useForm, useWatchForm不支持扩展
 
return (
  <>
    <GenerateForm
      formData={formData}
      labelCol={{ span: 6 }}
      wrapperCol={{ offset: 1 }}
      form={form}
      onValuesChange={onValuesChange}
      initialValues={initVal}
    />
  
);

嵌套形式

实际业务中常见的表单嵌套形式有以下几种：

• 每行有多个表单项

• 表单有多列，每列又有多个表单项

• 表单内有tab切换，每个tab下又有多个表单项

• 表单项为list，每个list item内又有多个表单项

• 其他表单嵌套

基于业务场景和技术抽象，formake提供四种表单项容器，分别是：

• rowContainer 行容器

• colContainer 列容器

• tabContainer tab 切换容器

• listContainer 列表容器

以上四种容器可以互相嵌套，且没有层级限制，配置时根据实际业务需要，可快速生成表单。

特殊说明：listContainer不支持嵌套listContainer自身，其余无限制。

实例：

简单demo，比如一行内有两个表单项，即可如下配置：

[
  {
    "marktype": "rowContainer",
    "title": "rowContainer",
    "param": "param_848636",
    "required": true,
    "items": [
      {
        "marktype": "input",
        "title": "input",
        "label": "输入框",
        "disabled": false,
        "rules": [],
        "eventConfig": {
          "filter": [],
          "modify": []
        },
        "placeholder": "",
        "id": 1685199851734,
        "param": "param_851734"
      },
      {
        "marktype": "inputNumber",
        "title": "inputNumber",
        "label": "数字输入",
        "disabled": false,
        "rules": [],
        "eventConfig": {
          "filter": [],
          "modify": []
        },
        "placeholder": "",
        "id": 1685199853300,
        "param": "param_853300"
      }
    ],
    "label": "",
    "id": 1685199848637,
    "expanded": true,
    "column": 2
  }
]

复杂表单：

​具体使用参见formake中文文档

拖拽生成form

有很多动态表单产品，功能也很不错，不过在实际应用中，配置json也是很繁琐的，尤其是一些复杂的表单。formake提供了拖拽编辑器，通过拖拽即可生成表单。

编辑器地址：formake编辑器

事件配置

formake 用表单 DSL 描述事件带来的副作用。

formake对事件进行了抽象，一般业务中，表单事件可以归纳为以下几点：

• 1，隐藏其他表单项

• 2，修改其他表单的值

• 3，禁用其他表单项

• 4，修改其他项的验证规则

• 5，修改其他表单项的选项 ......

这些操作最终都是对表单产生副作用，这些副作用又通过 react 去操作状态影响视图，相对的，这些状态再引起表单变化。formake 进行了进一步抽象，省略状态，监听值和事件，动态修改表单DSL，直接用表单 DSL 改变描述事件带来的视图改变。

formake 中的事件 DSL 配置

interface EventConfig {
  filter: Array<
    {
      triggerValue: Array<string>;  // 触发值
      hideFields: Array<string>;    // 隐藏的表单项的param
    }
  >,
  modify: Array<{
    {
      triggerValue: Array<string>;   // 触发值
      modifyField: string;           // 修改的字段
      newValue?: any;                // 被修改表单项的新值
      newFormItemConfig?: {          // 表单项配置更改后的属性，更改什么就填入什么属性
        disabled: boolean;
        // ...
      }
    }
  }>
}

filter 用于隐藏表单项 modify 用于描述修改表单项

demo

{
  marktype: 'radio',
  label: '是否远程',
  param: 'isOrigin',
  eventConfig: {
    filter: [
      {
        triggerValue: ['0'],
        hideFields: ['url', 'method', 'freshTime'],
      }
    ],
    modify: [
      {
        triggerValue: ['1'];
        modifyField: 'method';
        newFormItemConfig: {
          options: [
            {
              label:'get',
              value: '0'
            },
            {
              label:'post',
              value: '1'
            }
          ]
          // ...
        }
      }
    ],
  }
}

上面的配置是指： 当 isOrigin 字段值为'0'时，隐藏字段['url', 'method', 'freshTime'] 当 isOrigin 字段值为'1'时，修改 method 字段选项为 ['get', 'post']

formake扩展

formake对antd表单useForm()进行了扩展，useForm() => useWatchForm

useWatchForm基于Antd useForm封装，继承了useForm的所有功能，同时加入了设置值为对象的方法，获取值为对象的方法，值变化监测等功能。

1，useWatchForm 监测功能

表单值更新时，formake自动发起值检测，自动更新表单配置文件进而影响视图 可以通过form.store.activeFormData获取最新的表单配置文件

2，setFormatFieldsValue 和 getFormatFieldsValue

form.getFieldsValue()和form.setFieldsValue()获取到的表单值是扁平化的，对于一些复杂业务场景，扁平化不利于业务理解以及表单值设置和获取。

formake提供了setFormatFieldsValue 和 getFormatFieldsValue：

getFormatFieldsValue扩展自getFieldsValue，在获取值时可以直接获取到和配置文件相同的数据结构

setFormatFieldsValue 扩展自 form.setFieldsValue,支持设置值为嵌套对象，useWatchForm会自动根据配置文件进行扁平化处理。

setFormatFieldsValue 和 getFormatFieldsValue 主要应用于上述嵌套组件互相嵌套的场景。

formake扩展：https://www.pgting.com/pg-doc/formake/extend

formake开源

目前formake已开源，如果你有好的idea或者想参与，请加入我们。

formake github地址​github.com/AliSnowaroma/formake

formake文档​https://www.pgting.com/formake

智慧PG(pgting)​https://www.pgting.com