alibaba / formily

📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3

English | 简体中文

---

Background

In React, the whole tree rendering performance problem of the form is very obvious in the controlled mode. Especially for the scene of data linkage, it is easy to cause the page to be stuck. To solve this problem, we have distributed the management of the state of each form field, which significantly improves the performance of the form operations. At the same time, we deeply integrate the JSON Schema protocol to help you solve the problem of back-end driven form rendering quickly.

Features

• 🖼 Designable, You can quickly develop forms at low cost through Form Builder.
• 🚀 High performance, fields managed independently, rather rerender the whole tree.
• 💡 Integrated Alibaba Fusion and Ant Design components are guaranteed to work out of the box.
• 🎨 JSON Schema applied for BackEnd. JSchema applied for FrontEnd. Two paradigms can be converted to each other.
• 🏅 Side effects are managed independently, making form data linkages easier than ever before.
• 🌯 Override most complicated form layout use cases.

Form Builder

WebSite

2.0

https://formilyjs.org

1.0

https://v1.formilyjs.org

Community

• formilyjs
• designable
• icejs

How to contribute?

• Contribute document

Contributors

This project exists thanks to all the people who contribute.

LICENSE

Formily is open source software licensed as MIT.

formily's Issues

仓库不要太多 docs 编译后的 bundle.js

https://github.com/alibaba/uform/tree/master/packages/docs

好多开源都只是做到 markdown 驱动渲染, 不会提交 docs/bundle.js 等等大包的文档代码。保持仓库干净和减少 .git 的大小。

文档 API 按照字母表排序

摘取一个例子

属性名称	属性描述	属性类型	默认值
type	字段类型	Object
name	字段名称	Object	{}
default	默认值	any

可以变成

属性名称	属性描述	属性类型	默认值
default	默认值	any
name	字段名称	Object	{}
type	字段类型	Object

这样子方便查找, 之前为 antd 写了一个 sort 脚本, 后面整合进去

关于 uform 的自定义布局（DOM 嵌套）

Help us to manage our issues by answering the following:

1. How would you tag this issue?

• Question

2. Describe your issue:

• 由于使用中的项目需要自定义布局，而不使用 uform 的布局结构，想给 Field 组件添加父节点，通过该父节点给 Field 定位
• 但是在使用中发现，是存在问题的，该父节点会被独立出来并至于 form 元素的最底部，不再是嵌套的关系，即我希望的自定义布局失效了

3. 复现地址
   

[Umbrella] UForm Typescripts

为了让UForm拥有更好的IDE编辑体验，在这里发起了对UForm的Typescripts支持项目，统一在next-ts分支上维护，欢迎大家PR贡献。
下面是完成进度。

• @uform/utils
  • accessor.ts
  • array.ts
  • broadcast.ts
  • case.ts
  • clone.ts
  • compare.ts
  • defer.ts
  • index.ts
  • isEmpty.ts
  • lru.ts
  • schema.ts
  • types.ts
• @uform/validator
• @uform/core
• @uform/react
• @uform/antd
• @uform/next

调用submit方法，在控制台上会打印一个错误信息，无法进行catch

如图所示，点击提交时，会产生一个无法catch到的exception

是否可以去掉此exception或者配置成SchemaForm的一个选项，throwException: true/false

antd 下拉选择时控制台会报错

Help us to manage our issues by answering the following:

1. How would you tag this issue?

• Bug

2. Describe your issue:

• What is the current behavior?
  select 点击下拉框时，控制台会报 warning。

select input 的 type 约定建议

Help us to manage our issues by answering the following:

1. How would you tag this issue?

• Discussion

2. Describe your issue:

• input 和 select 的type ，我感觉语义多少都有问题，现在都叫做 string，然后通过 enum 来识别的方法值得商榷：一个是内容本身就不一定是 string，另一个是带来了使用上的不确定性。
• 顺带报一个 bug：antd 的 select，点击时会有 warning，官方示例都能看得到。

高性能如何体现

尝试使用registerFormField创建了一个自定义表单元素，发现外层容器渲染时，表单元素会重新渲染，这是正常情况吗，如何体现高性能

是否能提供一个复杂的例子，说明registerFormField的高级使用场景。

Disabled fields could not be changed in array when reordering the array

Help us to manage our issues by answering the following:

1. How would you tag this issue?

• Bug

2. Describe your issue:

• What is the current behavior?
• What is the expected behavior?
• Which versions of UForm?
• Did this work in previous versions of UForm?

3. If your issue is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via Bug Report Template on CodeSandbox
   .
   press up/down button in the array field, inputs will be changed but the textField won't.

https://codesandbox.io/s/qzo660or2j

新发布的0.1.10版本 表格内控件无法正常渲染

新发布的0.1.10版本 表格内控件无法正常渲染
请看如下demo
https://codesandbox.io/s/r5zl15834q

rerender，field的值不会发生变更

参考示例：https://codesandbox.io/s/l53q0x232q

一些看法

今天看了推送了解到uform，期待更加强大，可以参考下简道云 👍

官网内部Bug

How would you tag this issue?

【官网文档Bug】

Describe your issue:

1. 官网页面https://alibaba.github.io/uform/#/97UlUl/R7I8IJFmfR， 点击【原始API
   】表格中的站内链接，会跳转到站外去。
2. uForm 和 标准 json-schema 对 required 实现不一致，建议在文档中说明

多个 setFieldState 并行执行 promise 状态异常

• 问题描述：

多个 setFieldState，用promise.all方法执行时，无法正常进入resolve状态

如上图示，console.log语句没有执行

• CodeSandbox 地址
  详细代码地址：https://codesandbox.io/s/l53q0x232q
  .

重置按钮也进行数据校验

如题，重置按钮事件不需要进行数据校验吧

嵌套表单（一对一、一对多子表单）支持

RT，场景如报销申请单中的报销项目：

• 报销项目是一个子表单（可能内含报销项目、价格等字段），其有自己的字段验证规则
• 报销项目可能有0条至多条，由用户动态增加。
• 父表单（这里指报销申请单）有对子表单（报销项目）的验证，如数量（至少有一条，不可超过十条）
• 需考虑修改表单时对子表单数据的渲染和删除子表单项目时提交的结果方便服务器端处理

搜索过文档似乎没有发现关于嵌套表单相关的支持，请问 UForm 是否支持这一场景？或者以后是否计划实现？

以schema方式定义包含table的表单，table内的子控件不能按x-index 排序

以schema方式定义包含table的表单，table内的子控件不能按x-index 排序
请看如下demo
https://codesandbox.io/s/r5zl15834q

@babel/runtime

dependency 里面缺少了 @babel/runtime 依赖，单独引入会报错。

• 给的实例中因为是跟 antd 一起用的，而 antd 自带了 @babel/runtime ，没报错。
• 我们的场景，antd 是 umd 引入的……

---

麻烦一并修复一下呗，感谢~~~
后续有问题，我尽量提 pr。

value 为空字符串时处理错误

Help us to manage our issues by answering the following:

1. How would you tag this issue?

• Bug

2. radio 组件中，value 设置为空字符串的情况下，{ label: "无", value: "" }, 向 SchemaForm 传入 value 中对应字段值也为空字符串 value={{ mode: "" }} ，这时候没有选中对应的 radio，在如下 demo 中，「无」这一项应该是被选中的

3. If your issue is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via Bug Report Template on CodePen

https://codesandbox.io/s/91177rqzzw
.

card style 报个 bug

贴进来的代码：运行 card style 的官方实例，ok。 把官方实例注释掉，然后填入「官方实例生成的 schema」，控制台就报错了。（Uncaught TypeError: Cannot read property 'x-component' of undefined）

看起来另外几个 list 组件也有这个问题，一时忙没时间研究代码题 pr，作者帮忙看看吧。谢谢~

---

`import React from 'react';
import ReactDOM from 'react-dom';
import {
SchemaForm,
Field,
FormButtonGroup,
Submit,
Reset,
FormItemGrid,
FormCard,
FormPath,
FormBlock,
FormLayout,
createFormActions
} from '@uform/antd';
import { Button } from 'antd';
import Printer from '@uform/printer';
import 'antd/dist/antd.css';

const App = () => (

<SchemaForm
schema={{
'type': 'object',
'properties': {
'array': {
'type': 'array',
'x-props': {
'title': '这是卡片标题',
'renderAddition': '这是定制的添加文案',
'renderRemove': '这是定制的删除文案'
},
'x-component': 'cards',
'maxItems': 3,
'properties': {},
'items': {
'type': 'object',
'properties': {
'UFORM_NO_NAME_FIELD_$0': {
'type': 'object',
'x-props': {
'labelCol': 6,
'wrapperCol': 8
},
'x-component': 'layout',
'properties': {
'aa': {
'type': 'string',
'title': '字段1',
'properties': {}
},
'bb': {
'type': 'string',
'title': '字段2',
'properties': {}
},
'cc': {
'type': 'string',
'title': '字段3',
'properties': {}
},
'dd': {
'type': 'string',
'title': '字段5',
'properties': {}
},
'ee': {
'type': 'string',
'title': '字段6',
'properties': {}
},
'ff': {
'type': 'string',
'title': '字段7',
'properties': {}
},
'gg': {
'type': 'daterange',
'title': '字段8',
'properties': {}
}
}
}
}
}
}
}
}}
>
{/<Field name="array" maxItems={3} type="array" x-component="cards"/}
{/* x-props={{/}
{/ title: '这是卡片标题',/}
{/ renderAddition: '这是定制的添加文案',/}
{/ renderRemove: '这是定制的删除文案'/}
{/ }}>/}
{/ /}
{/ /}
{/ <Field*/}
{/* name="aa"/}
{/ type="string"/}
{/ description="hello world"/}
{/ title="字段1"/}
{/ />/}
{/ /}
{/ /}
{/ /}
{/ /}
{/ /}
{/ /}
{/ /}
{/ /}
{/ /}
{/*/}


);

export default App;
`

gutter造成横向滚动条

使用了gutter之后，页面出现横向滚动条，去掉gutter之后，恢复。
使用Node Inspector查看，在ant-row元素上，产生了-10像素的margin-left和margin-right

关于json schema拓展

Help us to manage our issues by answering the following:

1. How would you tag this issue?

• Question

2. Describe your issue:
   如何接入自有组件库，拓展json schema。如果有个示例就最好了
   .

Field的editable的问题

Bug
问题：

如果Field上设置了editable在 SchemaForm上设定的editable，不会全局覆盖掉Field的editable

API文档下有一处错误。

Help us to manage our issues by answering the following:

1. How would you tag this issue?

• Question

2. Describe your issue:

https://alibaba.github.io/uform/#/97UlUl/RbFYF9CvHx

该文档下的用例

setTimeout(() => {
  aa.changeValue(456) // 此处报错没有这个这个方法
  setTimeout(() => {
    form.submit()
  }, 1000)
}, 500)

是不是应该改为

  form.setValue('aa', 456);

文档缺少布局空间构成图示

我看了部分文档，一些名称有点难于理解，比如：

我类比了 bizcharts，我觉得需要统一所有的名称还有他们对应的位置，这样子才能一目了然。

能否通过 Schema 定义表单联动操作

Help us to manage our issues by answering the following:

1. How would you tag this issue?

• Question

2. Describe your issue:

rt，Demo表单联动的实现基本上是通过 effects 实现，能否通过 schema 定义表单联动规则呢？类似 x-rule 的做法，可以通过 x-effects 字段定义联动 rule

关于onValidateFailed/submit/validate返回的错误信息数据结构优化提案

问题来源于 #36

目前针对onValidateFailed/submit/validate所返回的错误消息都是一个字符串数组，并未明确给出具体字段的错误信息，这里是一个设计上的缺陷，如果要修复，最好的解决方案就是修改其数据结构

["该字段必填","该字段必填","该字段必填"]

===>

[{name:"aaa",message:"该字段必填"},{name:"bbb",message:"该字段必填"}]

显然，这是存在Break Change的，需要确认所有用户是否对所返回的错误消息做处理，如果没有，则可以在下个版本做修正。

uform 官网 SEO 较弱

搜索 uform effect 居然找不到，只能找到对应的 issue。

看看 React, 我搜索 React Fragment

基于antd的select类型field，首次触发时出现警告 Warning: Invalid attribute name: `0`

基于antd的select类型field，首次触发时出现警告 Warning: Invalid attribute name: 0
官方给出实例就有此问题
https://codesandbox.io/s/nry5o9lnx4

年份选择器不生效

官方页面https://alibaba.github.io/uform/#/YZCyCk/7lC3CXsVhB
antd > 简单场景 页面:
年份选择器 可以展开, 但选择后无任何效果 ( 下拉框也不会关闭 )

我的本地练习, 也有同样问题.

( 注: Fusion next 对应功能是正确的. )

createFormActions的validate方法，无法获取到具体是哪个字段产生了错误

createFormActions().validate().then(() =>{}, (errors) => {console.log(errors)})

打印这个数据时发现，errors是一个字符串数组

无法获取到具体是哪个字段产生了错误。

Range 不支持 step

1. How would you tag this issue?

• Bug

2. Describe your issue:

Range 组件不支持 step，导致不支持小数滑动

setFieldState同时设置loading和value未触发校验

Help us to manage our issues by answering the following:

1. How would you tag this issue?

• Bug

2. Describe your issue:

setFieldState同时设置loading和value未触发校验

3. If your issue is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via Bug Report Template on CodeSandbox

. https://codesandbox.io/s/dkywe

x-rules 函数返回promise时校验结果显示有延时

Help us to manage our issues by answering the following:

1. How would you tag this issue?

• Bug

2. Describe your issue:

x-rules 函数如果返回的promise，校验结果会在下次表达状态变更时才显示出来

3. If your issue is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via Bug Report Template on CodeSandbox

https://codesandbox.io/s/blissful-galileo-88xre

未来会有RN支持相关的计划吗？

Help us to manage our issues by answering the following:

1. How would you tag this issue?

• Question
• Bug
• Discussion
• Feature request
• Tip
• Enhancement
• Performance

2. Describe your issue:

• What is the current behavior?
• What is the expected behavior?
• Which versions of Rax, and which browser / OS are affected by this issue?
• Did this work in previous versions of Rax?

3. If your issue is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via Bug Report Template on CodePen
   .

场景案例文档 bug

Help us to manage our issues by answering the following:

1. How would you tag this issue?

• Bug

2. Describe your issue:

https://alibaba.github.io/uform/#/YZCyCk/7lC3CXsVhB

antd 简单场景中的年份选择框，点击选项无响应，貌似是因为 antd 中没有该类型

3. Bug Report Template

修改为 month 即可

 <Field type="month" title="年份" name="year" />

When to support typescript?

Help us to manage our issues by answering the following:

1. How would you tag this issue?

• Question
• Bug
• Discussion
• Feature request
• Tip
• Enhancement
• Performance

2. Describe your issue:

• What is the current behavior?
• What is the expected behavior?
• Which versions of Rax, and which browser / OS are affected by this issue?
• Did this work in previous versions of Rax?

3. If your issue is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via Bug Report Template on CodePen
   .

是否考虑兼容[email protected]

一些老项目还停留在ant 2.x版本，是否 @uform/antd中不限制dependencies中必须使用3.x，而是以peerDependencies的形式约束。

不支持 json schema 协议的 additionalProperties 属性

Help us to manage our issues by answering the following:

1. How would you tag this issue?

Bug

2. Describe your issue:

没有实现 json-schema 的 additionalProperties 属性，导致对一些动态属性难以支持

antd cards 写法有笔误

antd 文件夹内的antd 使用，可否整体都改成 import {xxx} from 'antd' 这种形式呢？

其中 cards 文件引入 card 的写法是这样的：
import Card from "antd/lib/card"
这么写倒是没问题，但在 umd 引入 antd 的背景下，这里确定会报错。

---

以上，谢谢！

使用action.setFieldState时未更新校验结果

Help us to manage our issues by answering the following:

1. How would you tag this issue?

• Bug

2. Describe your issue:

• What is the current behavior?
  使用action.setFieldState时未更新校验结果

3. If your issue is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via Bug Report Template on CodeSandbox

https://codesandbox.io/s/dkywe
.

目前似乎不支持cascader？

Help us to manage our issues by answering the following:

1. How would you tag this issue?

• Question

2. Describe your issue:
   目前只提供一些基本组件，类似cascader，tree这些组件留给用户自定义吗？
   .

是否支持自定义组件

比如我自己写了一个input组件怎么在表单内使用？

@uform/react的index.d.ts好像有问题，没有导出registerFormField等方法

Help us to manage our issues by answering the following:

1. How would you tag this issue?

• Bug

2. Describe your issue:

• Which versions of UForm?
  0.1.8
  在ts项目里使用UForm，发现registerFormField等方法没有声明。
  

Typescript下编译失败

1. How would you tag this issue?

• Bug

2. Describe your issue:

环境:

• typescript: 3.4.2
• @types/react 16.8.8
• @types/react-dom 16.8.3

编译报错:

ERROR in [at-loader] ./node_modules/@uform/antd/index.d.ts:8:38 
    TS2304: Cannot find name 'SubmitProps'.

ERROR in [at-loader] ./node_modules/@uform/antd/index.d.ts:9:24 
    TS2304: Cannot find name 'SubmitProps'.

ERROR in [at-loader] ./node_modules/@uform/antd/index.d.ts:40:26 
    TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

ERROR in [at-loader] ./node_modules/@uform/antd/index.d.ts:78:26 
    TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

ERROR in [at-loader] ./src/components/table/index.tsx:1:10 
    TS2305: Module '"../../../node_modules/@uform/antd"' has no exported member 'Field'.

ERROR in [at-loader] ./src/components/table/index.tsx:1:17 
    TS2305: Module '"../../../node_modules/@uform/antd"' has no exported member 'SchemaForm'.

应该是没有在ts下做测试就发布了。

以下是问题原因:

1. Cannot find name 'SubmitProps'.

在 @uform/antd/index.d.ts 中

import { ButtonProps } from 'antd/lib/button';

declare type SumbitProps = { // 这个明显的拼写错误，应改为SubmitProps
  status: 'submitting' | string;
} & ButtonProps;

export function Submit(
  props: React.ComponentPropsWithRef<SubmitProps>　// 与上一致
): React.ComponentType<SubmitProps>; // 与上一致

// ...

2. 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

在 @uform/antd/index.d.ts 中

import * as React from 'react';　// 应在顶部加上

3. A required parameter cannot follow an optional parameter

在 @uform/react/index.d.ts 中

// ...
declare type FormActionType = {
  getFieldState: (path?: string, callback: any) => any; // 可选参数应该在必填参数之后声明
};

// ...
declare type FormAsyncActionType = {
  getFieldState: (path?: string, callback: any) => Promise<any>;　// 可选参数应该在必填参数之后声明
};

// ...

4. Module '"../../../node_modules/@uform/antd"' has no exported member 'xxxxx'‘.

d.ts文件没有写完整导致。

建议:

暂时去掉d.ts文件,待其完善、充分测试之后再发布.

关于从 next/Form 组件迁移至 uform 的疑问

1. How would you tag this issue?

• Question

2. Describe your issue:

你好，我想从 Next/Form 组件进行迁移，有如下几个问题：

• Next 组件库的 Field 是提供 requiredMessage 等等自定义错误信息。
• Next 组件库校验不通过是会将对应表单的边框变成红色即给与 .next-error 类名。
• Next 组件库的 Field 是提供 setError 的方法，可以给对应字段 setError。
• 是否有 api，可获取对应的 actions，如 Next 中的 saveField。
  不知 uform 是否支持这些功能
  非常期待与感谢您的回答 😁
  谢谢！

以schema方式定义包含table的表单，不能添加记录行

以schema方式定义包含table的表单，不能添加记录行，会出现如下错误
Uncaught TypeError: Cannot read property 'x-component' of undefined

const schema = {
  "type": "object",
  "properties": {
    "array": {
      "type": "array",
      "x-component": "table",
      "maxItems": 3,
      "title": "数组",
      "properties": {},
      "items": {
        "type": "object",
        "properties": {
          "aa": {
            "type": "string",
            "title": "字段1",
            "properties": {}
          },
          "bb": {
            "type": "string",
            "title": "字段2",
            "properties": {}
          },
          "cc": {
            "type": "string",
            "title": "字段3",
            "properties": {}
          },
          "dd": {
            "type": "string",
            "title": "字段5",
            "properties": {}
          },
          "ee": {
            "type": "string",
            "title": "字段6",
            "properties": {}
          },
          "ff": {
            "type": "string",
            "title": "字段7",
            "properties": {}
          },
          "gg": {
            "type": "daterange",
            "title": "字段8",
            "properties": {}
          }
        }
      }
    }
  }
}



const App = () => (
  <Printer>
    <SchemaForm
     schema={schema}>
     
    </SchemaForm>
  </Printer>
)

Field x-rules属性自定义规则

代码：https://codesandbox.io/s/l53q0x232q

form onSubmit的时候，自定义校验失败，正则无误

文档示例的uoload不能正常运行

Help us to manage our issues by answering the following:

1. How would you tag this issue?

• Question

2. Describe your issue:

示例地址：https://codesandbox.io/s/lp8o5ylj1z
<Field type="upload" title="普通上传文件" name="upload3" x-component="upload" x-props={{ listType: 'text' ,action:'https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload'}} />
点击文件上传后，文件列表不更新，收集的数据里面也没有upload3的值

同一个 field 订阅了多个事件，如何保证先后顺序？

我对 fieldA 订阅了两个个事件(eventA, eventB)来设置 fieldB 的值，并且每个事件都依赖 fieldB 的最新值，但是现在修改 fieldA 后，两个事件获取的都是 fieldB 的旧值，请教大家应该如何操作？