理念

每个成熟的项目都应该有一个指导其开发的理念。没有核心理念，开发可能会在无休止的决策中停滞不前，并导致 API 变得更弱。

本文档概述了驱动 TanStack Form 开发和功能集的核心原则。

API 伴随着权衡。因此，可能会很想通过不同的 API 向用户提供每组权衡。然而，这可能会导致 API 分散，更难学习和使用。

虽然这可能意味着更高的学习曲线，但这意味着您不必质疑内部使用哪个 API，或者在切换 API 时有更高的认知负担。

TanStack Form 旨在灵活和可定制。虽然许多表单可能符合相似的模式，但总会有例外；特别是当表单是应用程序的核心组件时。

因此，TanStack Form 支持多种验证方法

• 时序自定义：您可以在失焦、更改、提交甚至挂载时进行验证。
• 验证策略：您可以验证单个字段、整个表单或字段子集。
• 自定义验证逻辑：您可以编写自己的验证逻辑，或使用像 Zod 或 Valibot 这样的库。
• 自定义错误消息：您可以通过从验证器返回任何对象来自定义每个字段的错误消息。
• 异步验证：您可以异步验证字段，并为您处理常见的实用程序，如防抖和取消。

在一个受控与非受控输入成为热门话题的世界中，TanStack Form 坚定地站在受控阵营中。

这带来许多优势

• 可预测：您可以预测表单在任何时间点的状态。
• 更易于测试：您可以通过传入值并断言输出来轻松测试您的表单。
• 非 DOM 支持：您可以将 TanStack Form 与 React Native、Three.js 框架适配器或任何其他框架渲染器一起使用。
• 增强的条件逻辑：您可以根据表单状态轻松地有条件地显示/隐藏字段。
• 调试：您可以轻松地将表单状态记录到控制台以调试问题。

当使用 TanStack Form 时，您永远不需要传递泛型或使用内部类型。这是因为我们已将库设计为从运行时默认值推断一切。

当编写足够正确的 TanStack Form 代码时，您应该无法区分 JavaScript 用法和 TypeScript 用法，除了您可能对运行时值进行的任何类型转换。

取而代之

useForm<MyForm>()

useForm<MyForm>()

你应该这样做

useForm({
  defaultValues: {
    name: 'Bill Luo',
    age: 24,
  } as MyForm,
})

useForm({
  defaultValues: {
    name: 'Bill Luo',
    age: 24,
  } as MyForm,
})

TanStack Form 的主要目标之一是您应该将其包装到您自己的组件系统或设计系统中。

为了支持这一点，我们有许多实用程序，可以更轻松地构建您自己的组件和自定义钩子

// Exported from your own library with pre-bound components for your forms.
export const { useAppForm, withForm } = createFormHook(/* options */)

// Exported from your own library with pre-bound components for your forms.
export const { useAppForm, withForm } = createFormHook(/* options */)

如果不这样做，您将在您的应用程序中添加更多的样板代码，并使您的表单变得不一致且不用户友好。