feat(validateFields): add message to reject error type

[guoyunhe]

在日常开发中，有时会使用链式 promise 调用：

form
  .validateFields()
  .then(values => axios.post('url', values))
  .then(...)
  .catch(err => message.error(err.message))

但是当表单校验失败时，弹出的 message 是空的，因为 validateFields 的 reject 返回并非标准 Error 对象，没有 message 属性。

此 PR 为 validateFields 的 reject 返回增加 message，使其更像一个 Error 对象。在需要展示 popup message 的场景能够更便捷的取值。降低开发者学习和使用的成本。

Summary by CodeRabbit

• 新功能

  • 扩展了验证错误实体接口，增加了错误消息属性。

• Bug 修复

  • 改进了表单验证错误处理机制，现在可以返回第一个错误消息。
  • 测试用例中增加了对表单提交失败的错误处理，明确显示缺少必填字段时的错误消息。

这些更改旨在提供更详细和清晰的验证错误信息，帮助用户更好地理解和解决表单验证问题。

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
field-form	❌ Failed (Inspect)			Jan 17, 2025 5:57am

[coderabbitai]

概述

演练

这个拉取请求引入了对验证错误处理的增强。在 src/interface.ts 中，ValidateErrorEntity 接口新增了 message 属性，用于存储验证错误消息。在 src/useForm.ts 中，validateFields 方法被修改以捕获并返回第一个验证错误消息，提升了错误报告的精确性。在 tests/index.test.tsx 中，测试用例也进行了相应修改，以确保在表单提交失败时能够准确反映错误消息和字段状态。

变更

文件	变更说明
src/interface.ts	在 ValidateErrorEntity 接口中添加 message: string 属性
src/useForm.ts	修改 validateFields 方法，增加错误消息捕获逻辑
tests/index.test.tsx	修改测试用例以增强表单提交失败时的错误处理，新增 message 字段并更新 values 字段

序列图

sequenceDiagram
    participant User
    participant FormStore
    participant Validator
    User->>FormStore: validateFields()
    FormStore->>Validator: 执行字段验证
    Validator-->>FormStore: 返回错误列表
    FormStore->>FormStore: 提取第一个错误消息
    FormStore-->>User: 返回带错误消息的结果

Loading

诗歌

🐰 验证的兔子轻轻跳
错误消息随风飘
接口新增一行字
代码更加明亮好
调试之路变通畅 🌈

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 11349b9 and 7497571.

📒 Files selected for processing (3)

• src/interface.ts (1 hunks)
• src/useForm.ts (1 hunks)
• tests/index.test.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

• src/interface.ts
• src/useForm.ts

🔇 Additional comments (1)

tests/index.test.tsx (1)

331-336: 测试用例正确验证了表单验证失败时的错误对象结构！

测试用例完整地覆盖了以下验证失败场景：

• 错误消息的传递
• 验证失败时的表单值状态
• 验证失败字段的详细信息

这些更改与 PR 的目标完全一致，确保了 validateFields 在验证失败时能够提供标准的错误对象。

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[zombieJ]

感觉你可以把错误都列一列，另外没有 test case

[guoyunhe]

如果字段太多的话 message 可能会有过长的问题，另外多个字符串拼在一起，连字符选什么也需要考虑，还要考虑多语言，用中文或英文符号都不是很合适。因此我觉得还是最好只保留第一条，处理起来比较简单。

[guoyunhe]

已补充测试用例