Sula - 让前端面向对象配置（二）表单Sula 是一个面向前端中台的产品级配置化框架，希望帮助非专业前端同学可以

Sula 是一个面向前端中台的 产品级 配置化框架，希望帮助非专业前端同学可以最小学习成本开发高质量、高体验的前端中台产品。

表单 - 前端同学永远的痛

稍微列列：

各种稀奇古怪的表单组件
表单组件间的关联关系千奇百怪
动态生成表单模板
创建表单、编辑表单、查看表单，查看表单变编辑表单……

不就是一些输入框、下拉框吗，前端一把辛酸泪……

antd4.0 form 愈发强大，但面对一大把的表单页，总有那么些场景让人大把掉头发。

试试 Sula CreateForm 帮你守护头发。

完整例子请移步

场景1 三合一（新建、编辑、查看）表单

通过 mode 来实现一套表单配置应对三种场景，

操作按钮变化

表单组件disabled

场景1 如何实现

通过mode实现三合一

const render = <CreateForm mode={mode} /> // create, edit, view

场景2 自定义表单操作按钮

通过 actionsRender 自定义，

实现一个和Submit功能一致的自定义按钮

场景2 如何实现

通过 actionsRender 实现自定义表单操作按钮

const actionsRender=[
            {
              type: 'button',
              props: {
                children: 'Custom',
              },
              action: [
                'validateFields',
                {
                  url: 'https://www.mocky.io/v2/5185415ba171ea3a00704eed',
                  method: 'POST',
                },
                () => console.log('Finished!!!')
              ],
            },
          ]

场景3 表单组件间的显示关联

通过 dependeny.visible 实现显示关联配置

选择性别女时，填写喜欢足球的原因

调查问卷不显示时请求参数自动过滤

场景3 如何实现

relates代表影响其关联性的组件name，支持多个影响一个，因此为数组；inputs代表影响其关联的值列表，二位数组中的每个数组对应一个name的值列表；output为inputs值匹配后的输出，即gender组件值为female时，questionnaire显示。

const depConfig = {
              name: 'questionnaire',
              label: '调查问卷',
              field: {
                type: 'textarea',
                props: {
                  placeholder: 'why do you like football?',
                },
              },
              initialVisible: false,
              dependency: {
                visible: {
                  relates: ['gender'],
                  inputs: [['female']],
                  output: true,
                  defaultOutput: false,
                },
              },
            },

场景四自定义表单组件关联

构想一个奇葩的关联场景，如果选择性别女，且后端返回 {hello: 'world'} 时，调查问卷填写“喜欢中国女足”

返回匹配

场景4 如何实现

通过自定义关联插件的 ctx.form 实例实现表单组件的精细控制

const customDepConfig = {
              name: 'questionnaire2',
              label: '调查问卷2',
              field: {
                type: 'textarea',
                props: {
                  placeholder: 'why do you like football?',
                },
              },
              dependency: {
                value: {
                  relates: ['gender'],
                  type: (ctx) => {
                    if (ctx.values[0] === 'female') {
                      request({
                        url: 'https://www.mocky.io/v2/5185415ba171ea3a00704eed',
                        method: 'POST',
                      }).then((data) => {
                        if (data.hello === 'world') {
                          ctx.form.setFieldValue(ctx.name, '喜欢中国女足');
                        }
                      });
                    }
                  },
                },
              },
            },

总结一下

CreateForm 通过 mode 实现三合一表单
通过dependency来实现表单关联
通过actionsRender实现自定义表单操作按钮

由于Form相关的点太多，该篇只作为了解与入门，有关Form的更多高阶知识将单开一篇文章。

康康 Sula

当前 Sula 1.0 还处于起步阶段（alpha 请不要在生产环境使用），如果你对 Sula 的开发模式感兴趣请扫码入群，欢迎多提宝贵意见，帮助 Sula 快速成长。

Sula - 让前端面向对象配置（二）表单