alibaba / formily Goto Github PK

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

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

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

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

Bug
问题：

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

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

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

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。

How would you tag this issue?

【官网文档Bug】

Describe your issue:

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

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

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

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

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

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

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

1. How would you tag this issue?

• Bug

2. Describe your issue:

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

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等方法没有声明。
  

贴进来的代码：运行 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;
`

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

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

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

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

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

以上，谢谢！

为了让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

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

问题来源于 #36

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

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

===>

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

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

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
   .

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

看看 React, 我搜索 React Fragment

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

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

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

Help us to manage our issues by answering the following:

1. How would you tag this issue?

• Question

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

• 问题描述：

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

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

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

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

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

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

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，官方示例都能看得到。

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
.

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的值

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);

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

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

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

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" />

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 是否支持这些功能
  非常期待与感谢您的回答 😁
  谢谢！

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

以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>
)

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

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

Help us to manage our issues by answering the following:

1. How would you tag this issue?

• Question

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

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 属性，导致对一些动态属性难以支持

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. 复现地址
   

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

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

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

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

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

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

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
   .

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
.

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

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文件,待其完善、充分测试之后再发布.

摘取一个例子

可以变成

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

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