Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Form.List support rules #26676

Merged
merged 8 commits into from
Sep 11, 2020
Merged

feat: Form.List support rules #26676

merged 8 commits into from
Sep 11, 2020

Conversation

zombieJ
Copy link
Member

@zombieJ zombieJ commented Sep 10, 2020

[中文版模板 / Chinese template]

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • TypeScript definition update
  • Bundle size optimization
  • Performance optimization
  • Enhancement feature
  • Internationalization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

🔗 Related issue link

resolve #25717

💡 Background and solution

📝 Changelog

Language Changelog
🇺🇸 English Form.List support rules validation and add Form.ErrorList to show the errors.
🇨🇳 Chinese Form.List 支持 rules 校验并添加 Form.ErrorList 组件用于展示。

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

View rendered components/form/demo/dynamic-form-item.md
View rendered components/form/index.en-US.md
View rendered components/form/index.zh-CN.md

@zombieJ zombieJ mentioned this pull request Sep 10, 2020
19 tasks
@zombieJ zombieJ requested review from afc163 and hengkx September 10, 2020 08:19
@zombieJ
Copy link
Member Author

zombieJ commented Sep 10, 2020

因为 List 内的展示是开发者自定义的,所以添加了一个 ErrorList 组件。大家看一下~ @ant-design/ant-design-collaborators

@ant-design-bot
Copy link
Contributor

ant-design-bot commented Sep 10, 2020

@ant-design-bot
Copy link
Contributor

ant-design-bot commented Sep 10, 2020

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 10, 2020

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 03800f7:

Sandbox Source
antd reproduction template Configuration

@github-actions
Copy link
Contributor

github-actions bot commented Sep 10, 2020

Size Change: +491 B (0%)

Total Size: 881 kB

Filename Size Change
./dist/antd-with-locales.min.js 357 kB +262 B (0%)
./dist/antd.compact.min.css 66.3 kB +2 B (0%)
./dist/antd.min.css 66.3 kB -1 B
./dist/antd.min.js 323 kB +228 B (0%)
ℹ️ View Unchanged
Filename Size Change
./dist/antd.dark.min.css 67.6 kB 0 B

compressed-size-action

@hengkx
Copy link
Member

hengkx commented Sep 10, 2020

试了下 demo 没什么问题 想问一下 Form.Item 本身的 那些校验是否都支持?

@codecov
Copy link

codecov bot commented Sep 11, 2020

Codecov Report

Merging #26676 into feature will increase coverage by 0.01%.
The diff coverage is 97.56%.

Impacted file tree graph

@@             Coverage Diff             @@
##           feature   #26676      +/-   ##
===========================================
+ Coverage    99.82%   99.83%   +0.01%     
===========================================
  Files          384      385       +1     
  Lines         7380     7391      +11     
  Branches      2062     2014      -48     
===========================================
+ Hits          7367     7379      +12     
+ Misses          13       12       -1     
Impacted Files Coverage Δ
components/form/FormItemInput.tsx 100.00% <ø> (+5.88%) ⬆️
components/form/ErrorList.tsx 96.00% <96.00%> (ø)
components/form/FormItem.tsx 100.00% <100.00%> (ø)
components/form/FormList.tsx 100.00% <100.00%> (ø)
components/form/context.tsx 100.00% <100.00%> (ø)
components/form/index.tsx 100.00% <100.00%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ca46793...03800f7. Read the comment docs.

@zombieJ
Copy link
Member Author

zombieJ commented Sep 11, 2020

@hengkx 只支持自定义校验,Form.List 和 Form.Item 不太一样在于它本身作为字段值一定是数组,但是内部实现又是同一套校验。做注入和 Form.Item 对齐黑了点,所以目前不开放内置的校验方式。

@hengkx
Copy link
Member

hengkx commented Sep 11, 2020

是否可以在Form.List加上 min max这些 很常用的 校验 @zombieJ

@zombieJ
Copy link
Member Author

zombieJ commented Sep 11, 2020

嗯,准备先放出来。然后没问题了再加上~ 之后会加的

@zombieJ zombieJ merged commit 1faabb2 into feature Sep 11, 2020
@zombieJ zombieJ deleted the list-rules branch September 11, 2020 13:27
@StallionV
Copy link

StallionV commented Oct 11, 2020

@afc163 The typescript definitions have not been updated. We cannot use rules props with TS files.

export interface FormListProps {
    prefixCls?: string;
    name: string | number | (string | number)[];
    children: (fields: FormListFieldData[], operation: FormListOperation, meta: {
        errors: React.ReactNode[];
    }) => React.ReactNode;
}

@819049639
Copy link

819049639 commented Jul 1, 2022

Form.ErrorList 初始展示报错时,没问题;但是再次展示报错时,会多次渲染,导致dom抖动。官网示例“动态增减表单项”也有这个情况。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants