How to add examples to @tanstack/zod-form-adapter?

[vicentematus]

Currently there is a basic example on how to use React with Zod with inline <form.Field> validations. But it's missing examples on how to use with a defined Zod Schema on the hook definition.

Here is a real Zod example:

export const FormSchema = z.object({
  email: z.string(),
  companies: z.array(CompanySchema).optional().default([]),
});

export type UserForm = z.infer<typeof FormSchema>;

If I specify the generics of the type UserForm and ZodValidator, the library infers it correctly

import {formSchema, type UserForm} from './schemas/form.ts'
const form = useForm<UserForm, ZodValidator>({
   defaultValues: {
     email: "",
     companies: [],
   },
   validatorAdapter: zodValidator(),
   validators: {
     onChange: FormSchema,
   }
 });

If I don't specify the types on the generic of the hook, then the types are not inferred.

When you specify the UserForm type, and the ZodValidator from @tanstack/zod-form-adapter the type definitions are inferred correctly. It's related to this issue, see the discussion below.

Thanks you guys, this library is amazing by the way.

[Balastrong]

Do you think we need one more example for each adapter or would be enough to update the existing ones with form-level validation? That's probably the most common case anyway.

If you want to give it a try on the zod example I'm happy to have a look at your PR, the project source is on examples/react/zod

Speaking of the type, you can define the default values like that and you won't need to explicitly type the form

defaultValues: {
     email: "",
     companies: [],
   } as UserForm

[vicentematus]

Hey @Balastrong thanks for responding! I watched your tutorials on how to setup Tanstack Form.

Good question, maybe it's best to update the current example and defining the schema at the root level.

Speaking of the types, thanks for the advice that worked. Now the types are being inferred correctly without specifying it on the hook

const form = useForm({
    defaultValues: {
      email: data?.user_data.email || "",
      insurances: [],
      isapres: [],
    } as UserForm,
    validatorAdapter: zodValidator(),
    validators: {
      onChange: FormSchema,
    },
    onSubmit: async ({ value }) => {
      console.log(value);
    },
  });

I'm up to contributing by updating the current example 😺

[vicentematus]

Hi @Balastrong I opened a pull request on #982 updating the current example :)