formily
form-render

https://formilyjs.org/
Formily实践 - 知乎 实践的比较详细
化繁为简，开箱即用 | 阿里经济体Formily开源表单方案建设-阿里云开发者社区
https://github.com/alibaba/formily/blob/master/packages/antd/src/index.tsx @formilyjs/antd 的源码地址

总览

  • schema | json描述方案
  • pro form方案
  • hook类方案
  • 组件封装
  • 可视化设计

schema | json描述方案 动态表单

hook类方案

  • react-hook-form 支持了array等类型
  • formiky
  • react final form

可视化方案

  • vue-form-making

(报名可见)前端搞搭建|洛尘 - 如何设计实现 PC 站点搭建系统 - Schema · 语雀 涉及到可视化表单 schema

整体性思考 表单解决哪几个问题

  • 数据收集，
  • 校验，
  • 复杂表单，嵌套对象，多级数组 （此时的数据收集和校验）
  • 表单联动 （）

动态表单

如何描述组件类型？

使用一个ui

文章实践

化繁为简，开箱即用 | 阿里经济体Formily开源表单方案建设 1.0的介绍
React 表单源码阅读笔记

Formily实践 - 知乎 还介绍了核心理念
开发这样一个复杂的表单你需要用多久 - 知乎 看看一个复杂的需求，以及此人实现
Formily2.0思维导图（附) - 知乎 说明很复杂
前端阅读哪些开源库的源码让你觉得打开了新思路？ - 知乎
Mobx真的好用吗？它有什么优缺点？主要适用于什么场景？ - 知乎
如何评价Formily2.0？ - 知乎

json & schema大法

formily

Formily实践 - 知乎 还介绍了核心理念

可维护的代码有以下特征

代码是模块化的，逻辑是分层的，Service是一层，View是一层，核心业务逻辑是一层，事件处理逻辑是需要与jsx层做严格隔离的。 比如：集团Antd Form方案在复杂场景，容易不可维护

原生支持动态化渲染，核心理念，性能增强，代码可维护性增强

Antd Form, Fusion Form没有原声支持动态化渲染

formily基于以上问题，借鉴了final-form核心理念并做了优化，如性能采用状态分布式管理，局部更新，性能能较传统react单向数据流管理提升数倍，代码可维护性增强：副作用独立管理，业务逻辑、联动收敛到一处维护，事件处理逻辑与jsx层严格隔离，并采用了标准的json Schema，为了不污染json-schema原本协议的升级迭代，对数据描述增加了x-*属性，这样就能兼顾数据描述与UI描述。

其实，单向数据流总结一句话就是：数据同步靠根组件重绘来驱动，子组件重绘受根组件控制.状态分布式管理就是：数据同步靠根组件广播需要更新的子组件重绘，根组件只负责消息分发

为什么采用JSON Schema?

标准化协议，不管是对前端，还是对后端都是易于理解的通用协议 JSON Schema更侧重于数据的描述，而非UI的描述，因为表单，它就是数据的输入，我们希望，用户关心的,更多是数据，而非UI JSON Schema可以用在各种数据驱动场景，比如可视化搭建引擎中的组件配置器等

核心概念和组成部分学习

formily && form-render


form-render & vue form render

基于Vue 3.x 实现的 Form render - SegmentFault 思否

vue-dynamic-form-component

描述方式，类似async-validator的描述方式，以及关于Object和Array部分

支持嵌套对象、多级数组的Vue动态多级表单组件 —— vue-dynamic-form-component - SegmentFault 思否

vue-dynamic-form-component/form-item.vue at master · chenquincy/vue-dynamic-form-component 递归的方式实现的嵌套

同时对比了vue-form-generator和vue-form-making的缺点

vue-form-generator

vue-generators/vue-form-generator: A schema-based form generator component for Vue.js

Vue-form-render

采用了Vue3

muwoo/vue-form-render: Base on Vue 3.x, Quickly generates custom form configuration interfaces using JSON Schema.

https://github.com/muwoo/vue-form-render/blob/master/examples/demos/all.vue all类型的最下面，其实就是array类型，内部嵌套了object类型的实现

el-form-schema

el-form-schema

可视化方案

vue-from-making

https://github.com/GavinZhuLei/vue-form-making

组件化开发

antd form (useForm)

fields
object

数组的处理

vue antd form

三层的设计

  • Form
    • model
    • rules validate
    • onSubmit onFinish
    • layout labelCol wrapperCol
  • FormItem
    • label name rules required validateTrigger
    • 职责，如何联动
  • 控件-Input
    • onChange, onBlur
    • v-model (value, emit:change)

Input组件

有几个问题

  • 如何知道控件发生了事件？

    • 通过传入onChange事件，先记录originalBlur，再覆盖上自身的onFieldBlur

  • Form上设定的Rules和FormItem上设定的Rules的关系，以及设计

    • 解法1，都集中于Form上，子组件注册到父组件上
    • 解法2，在FormItem上处理，使用inject获取Form上的rules和本地的rules进行合并，以及model

  • 如何在哪里验证？不需要验证隐藏的组件。error信息的存储

    • error存储在各Item上，但在调用FormItem上会返回
    • 注册器模式，addField，添加上的组件才会被验证

  • 关于name，复杂结构，嵌套对象，数组模型

    • ['a', 'b', 'c'] 即是对象的 'a.b.c'
    • ['a', 1] 即是 a[1]

哪些设计模式？

  • project和inject的依赖注入，在FormItem中获取FormContext，获取到各种值

  • 注册器模式，Form通过提供addField和removeField，子组件在生命周期执行执行

  • AOP模式，Override，对控件覆盖添加onBlur和onChange事件

  1. 未拆分时是如何的？
  3. model (统一的数据对象)
  4. rules (这种设计是如何形成的, async-validator)
  5. validate ()
  6. errorMap
  7. showedFields 即展示的字段 (生命周期的重要性，销毁时能进行销毁)
  9. onChange(name, )
  10. onBlur(name, )
  12. 拆分的抽象
  13. Form 
  14. FormItem (这怎么想到的) ()
  15. Input控件 
  17. 其它类型的抽象
  18. RadioGroup Radio

怎么解决的？


react formiky

react final form

react hook form

表单验证

Async-validator

  • vuelidate

Angular form