[feat] Field validation from form schema

[crutchcorn]

This PR introduces the ability to pass a schema to the validators object on a form and have it validate each specific field:

const form = useForm({
  defaultValues: {
    firstName: '',
    lastName: '',
  },
  onSubmit: async ({ value }) => {
    // Do something with form data
    console.log(value)
  },
  validators: {
    onChange: z.object({
      // Errors here are passed to the <form.Field name="firstName"> component
      firstName: z.string().min(3, 'First name must be at least 3 characters'),
      lastName: z.string().min(3, 'Last name must be at least 3 characters'),
    }),
  },
  // Add a validator to support Zod usage in Form and Field
  validatorAdapter: zodValidator({}),
})

TODO

• Update Valibot adapter
• Update Yup adapter
• Fix issues with createServerValidate
• Update docs

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 198c08a. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 2 targets

• nx affected --targets=test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build --parallel=3
• nx run-many --target=build --exclude=examples/**

---

Sent with 💌 from NxCloud.

[pkg-pr-new]

Open in Stackblitz

More templates

• @tanstack/form-example-angular-array
• @tanstack/form-example-angular-simple
• @tanstack/form-example-angular-valibot
• @tanstack/form-example-angular-yup
• @tanstack/form-example-angular-zod
• @tanstack/form-example-lit-simple
• @tanstack/form-example-lit-ui-libraries
• @tanstack/form-example-react-array
• @tanstack/field-errors-from-form-validators
• @tanstack/form-example-react-next-server-actions
• @tanstack/form-example-react-query-integration
• @tanstack/form-example-react-tanstack-start
• @tanstack/form-example-react-simple
• @tanstack/form-example-react-valibot
• @tanstack/form-example-react-ui-libraries
• @tanstack/form-example-react-yup
• @tanstack/form-example-react-zod
• @tanstack/form-example-solid-array
• @tanstack/form-example-solid-simple
• @tanstack/form-example-solid-yup
• @tanstack/form-example-solid-valibot
• @tanstack/form-example-solid-zod
• @tanstack/form-example-vue-array
• @tanstack/form-example-vue-simple
• @tanstack/form-example-vue-valibot
• @tanstack/form-example-vue-yup
• @tanstack/form-example-vue-zod

@tanstack/form-core

pnpm add https://pkg.pr.new/@tanstack/form-core@925

@tanstack/angular-form

pnpm add https://pkg.pr.new/@tanstack/angular-form@925

@tanstack/lit-form

pnpm add https://pkg.pr.new/@tanstack/lit-form@925

@tanstack/react-form

pnpm add https://pkg.pr.new/@tanstack/react-form@925

@tanstack/solid-form

pnpm add https://pkg.pr.new/@tanstack/solid-form@925

@tanstack/valibot-form-adapter

pnpm add https://pkg.pr.new/@tanstack/valibot-form-adapter@925

@tanstack/vue-form

pnpm add https://pkg.pr.new/@tanstack/vue-form@925

@tanstack/yup-form-adapter

pnpm add https://pkg.pr.new/@tanstack/yup-form-adapter@925

@tanstack/zod-form-adapter

pnpm add https://pkg.pr.new/@tanstack/zod-form-adapter@925

commit: 198c08a

[Balastrong]

Thanks for jumping so fast on expanding adapters to the new validation API :D

IIRC @jljorgenson18 was also looking for this feature, feedback is welcome!

[jljorgenson18]

Yep I was going to try to contribute here and was waiting for the field error set from form PR to be merged. I'm happy to give feedback and try it out at least.

[bompi88]

What is the current status of this PR?

[crutchcorn]

@bompi88 I'm... Actively working on it? Like, have made commit less than an hour ago that marked a lot of things off?

We'll get it reviewed soon, but timing just felt weird with "status?" right after I'd worked on it lol

[bompi88]

@crutchcorn I'm sorry I did not see that. I agree that is weird 😂

[Balastrong]

All three adapters now should be able to inject errors for:

• Primitives
• Nested objects
• Arrays

A couple extra notes:

1. I kinda went bruteforce when adapting each validator's path system into our own and used the exact same approach on all of them. Pros, easier to maintain, cons, there might be a smarter (faster?) way for each validator (e.g. zod has a flatten function, could it help? I don't know)
2. There's quite a lot of repeated code across the validators. Are we ok keeping it like that or refactoring a bit?

Anyway, I don't think these are blockers. We now have the feature working without any breaking change to our API, there's plenty of time to refine the internals later imho.

[bompi88]

🚀

[crutchcorn]

This LGTM @Balastrong - great work! Merging now

[bompi88]

@crutchcorn Nice work! I love to test it out 😁 I think the squash commit message was on the wrong format [feat] and not feat: therefore no release? I might be wrong here

[Balastrong]

@bompi88 you're right! :D

I fixed it now, 0.33 should be available 🚀

[bompi88]

Thanks @Balastrong and @crutchcorn ! So far this version works really well🎉