mcpField
T
tanstack-form

tanstack-form

github.com/exceptionless开发2.5k210 次安装1 天前更新
代码仓库

关于 tanstack-form

用于在所述 Svelte 应用中使用 @tanstack/svelte-form 构建表单的技能，说明如何处理模式验证、服务器错误、提交状态及仅在成功后进行表单状态转换。

主要功能

  1. 01扩展生成的 Zod 模式
  2. 02区分同步验证与异步提交
  3. 03将 ProblemDetails 映射为表单错误
  4. 04失败后保留已输入值
  5. 05处理等待与成功状态

适用场景

  1. 01添加功能专属的表单验证
  2. 02显示 API 字段错误和表单错误
  3. 03防止重复提交
  4. 04仅在保存成功后关闭对话框

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/exceptionless/exceptionless --skill tanstack-form

安装后在 Claude Code 中输入/tanstack-form确认已加载。

详细介绍

TanStack Form

使用 @tanstack/svelte-form，并通过 $generated/schemas 派生功能模块的 schema。在功能模块自有文件中扩展 schema；不要编辑生成的输出。

当前示例

  • src/Exceptionless.Web/ClientApp/src/routes/(auth)/login/+page.svelte：表单创建、提交、字段组合和提交中状态。
  • src/Exceptionless.Web/ClientApp/src/lib/features/auth/schemas.ts：生成的 schema 导出和功能模块专属验证。
  • src/Exceptionless.Web/ClientApp/src/lib/features/shared/validation.ts：ariaInvalid、mapFieldErrors 和 problemDetailsToFormErrors。

请遵循当前实现，不要重复构建表单基础设施。将 API ProblemDetails 映射为字段错误或表单错误，失败后保留已输入的值，并且仅在提交成功后关闭对话框。

使用已安装的 Field 组件，并为其关联标签和验证属性。等待处理期间禁用重复提交。组件组合方式请参阅 shadcn-svelte。

提交生命周期

  1. 定义带类型的默认值，并扩展生成的 Zod schema，以添加功能模块专属约束或跨字段约束。
  2. 使用当前表单的同步验证钩子处理 schema 错误，并使用异步提交钩子执行服务端操作。遵循所引用实现的钩子约定，不要贸然在不同钩子之间转移 API 调用。
  3. 等待操作完成。使用 problemDetailsToFormErrors 映射预期的 ProblemDetails；对于意外失败，提供表单级错误，但不要泄露内部详情。
  4. 通过 ariaInvalid 和 mapFieldErrors 关联字段状态。除了字段错误，也要显示表单级错误，以便非字段错误仍然可见。
  5. 在所需工作完成前保持等待状态。失败时保留值；只有在成功且完成任何必要的缓存协调后，才重置表单、导航或关闭对话框。

检查无效输入、服务端拒绝、重复提交和成功完成的情况。对话框关闭本身并不能证明保存成功。

评论

支持 Markdown