useForm with zod and typescript

[kuamanet]

Hello everybody, I'm uncertain on how to use the useForm react hook with zod validator adapter if I want to provide a schema for the whole form, instead of specifying validation rules for each field.
A.k.a.

const { isIdle, mutate: authenticate } = useMutation<undefined | string, DefaultError, LoginFormDto>({
    mutationFn: async dto => {
      return await authenticationRepository.authenticate(dto);
    },
  });

const form = useForm({
    validatorAdapter: zodValidator,
    onSubmit: ({ value }) => {
      authenticate(value); // Typescript will complain because value is of type unknown
    },
  });

While this is totally expected, since I'm not providing any schema that can be used to infer the type of value, the only option via the useForm api I see in the docs is the validators option, is this correct?

Also if I provide the schema under the validators, the type will not be desumed

const { isIdle, mutate: authenticate } = useMutation<undefined | string, DefaultError, LoginFormDto>({
    mutationFn: async dto => {
      return await authenticationRepository.authenticate(dto);
    },
  });

  const form = useForm({
    validatorAdapter: zodValidator,
    validators: {
      onSubmit: loginFormSchema,
    },
    onSubmit: ({ value }) => {
      authenticate(value); // Typescript will complain because value is of type unknown
    },
  });

Also I've seen that if I provide the types to the userForm like this

const { isIdle, mutate: authenticate } = useMutation<undefined | string, DefaultError, LoginFormDto>({
    mutationFn: async dto => {
      return await authenticationRepository.authenticate(dto);
    },
  });

  const form = useForm<LoginFormDto, typeof zodValidator>({
    validatorAdapter: zodValidator,
    onSubmit: ({ value }) => {
      authenticate(value);
    },
  });

value will take the correct type. I think it would be more "correct" to infer the type of the value of the form from a provided schema

const form = useForm({
    validatorAdapter: zodValidator,
    validators: loginFormSchema,
    onSubmit: ({ value }) => {
      authenticate(value); // TS is "smart enough" to know value's type
    },
  });

What do you think?

[crutchcorn]

This appears to be a bug with our types, not a limitation with our API.

const { isIdle, mutate: authenticate } = useMutation<undefined | string, DefaultError, LoginFormDto>({
    mutationFn: async dto => {
      return await authenticationRepository.authenticate(dto);
    },
  });

  const form = useForm({
    validatorAdapter: zodValidator,
    validators: {
      onChange: loginFormSchema,
    },
    onSubmit: ({ value }) => {
      authenticate(value);
    },
  });

This code should work as-intended with value defined properly and onChange executing for the whole app.

Could you open a GH issue reporting this bug so we can investigate?

Actually, before you do could you confirm for me that your TS types have: strict: true enabled?

[sourabhLX]

The validation is not working the errors array is empty no matter what it try

but if i use validation in fields it works fine

    <form.Field
              name="profilePictureUrl"
              // validators={{
              //   onChange: yup.number().required(),
              // }}
              children={(field) => {
                console.log(field.state);```
                
   can any one tell why ???

[crutchcorn]

I need a minimal repro to figure out why this might happen. Let's open a new issue and discuss more there

[Parallax18]

For anyone still dealing with this. This seems to work for me. Not sure why I have to call the zodValidator though.
import { useForm, Validator } from "@tanstack/react-form";
import { zodValidator } from "@tanstack/zod-form-adapter";

const form = useForm<LoginDto, Validator<LoginDto>>({ validatorAdapter: zodValidator(), validators: { onChange: loginValidatorSchema, }, onSubmit: ({ value }) => console.log(value.email), });

[vicentematus]

Nevermind,for some reason the Typescript server bugged out and I had to restart VS Code lol.

I encounter the same problem that the ZodSchema and the types are not inferred correctly on the fields. Here is the code:

Why is this happening when you specify Validator?

Zod Schema is

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

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

Here I'm specifying the ZodValidator from tanstack/react-form and the UserForm that Zod infers. My example using the hook:

const form = useForm<UserForm, ZodValidator>({
   defaultValues: {
     email: "",
     companies: [],
   },
   validatorAdapter: zodValidator(),
   validators: {
     onChange: FormSchema,
   }
 });

Maybe its because it specifies the on the docs that the 2nd argument of generic is a Validator? https://tanstack.com/form/latest/docs/framework/react/reference/functions/useform#type-parameters

But anyways the react-zod-adapter has the ZodValidator which is basically the same.

https://github.com/TanStack/form/blob/main/packages/zod-form-adapter/src/types.ts#L6

What could be the problem? Thanks to the maintainers, TanStack it's a great library.