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
[x] Update Yup adapter
[ ] Update docs

Aug 28 '24 09:08 crutchcorn

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 198c08a2937744e2fbbe944a06e459065a5437b4. 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

Sent with 💌 from NxCloud.

Aug 28 '24 09:08 nx-cloud[bot]

Open in Stackblitz

More templates

@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

Aug 28 '24 09:08 pkg-pr-new[bot]

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.

Aug 29 '24 14:08 jljorgenson18

What is the current status of this PR?

Sep 13 '24 12:09 bompi88

@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

Sep 13 '24 13:09 crutchcorn

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

Sep 13 '24 13:09 bompi88

🚀

Sep 18 '24 12:09 bompi88

This LGTM @Balastrong - great work! Merging now

Sep 18 '24 21:09 crutchcorn

@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

Sep 19 '24 07:09 bompi88

@bompi88 you're right! :D

I fixed it now, 0.33 should be available 🚀

Sep 19 '24 09:09 Balastrong

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

Sep 19 '24 18:09 bompi88

[feat] Field validation from form schema

TODO

☁️ Nx Cloud Report