Issues with validators (zod and native)

Hi there, a TanStack Form newbie here.
I am running into a type error issue with the zod validator adapter.
I was following the docs and zod examples, despite doing everything same I can't get the validators running somehow.

With the zod validator adapter i get following error:

Type 'Validator<unknown, ZodType<any, ZodTypeDef, any>>' is not assignable to type 'undefined'.

Type 'Validator<unknown, ZodType<any, ZodTypeDef, any>>' is not assignable to type 'undefined'.

My form looks like this:

const form = useForm<InsertAppointmentSchemaInterface>({
        onSubmit: ({ value }) => {
            // some onSubmit logic here...
        },
        validatorAdapter: zodValidator(),
    })

const form = useForm<InsertAppointmentSchemaInterface>({
        onSubmit: ({ value }) => {
            // some onSubmit logic here...
        },
        validatorAdapter: zodValidator(),
    })

My field is an agreement checkbox, that should be checked to be able to submit the form and it looks like this (with zod validator, without I was just checking the value and returning the error msg with js):

<form.Field
                            name="readAgreement"
                            validators={{
                                onSubmit: z.boolean().refine((val) => {
                                    val === true
                                }, "Accept this"),
                            }}
                        >
                            {(field) => (
                                <Checkbox
                                    name={field.name}
                                    id={field.name}
                                    label={t("bookings.finalBookingView.agreementText")}
                                    onChange={field.handleChange}
                                    onBlur={field.handleBlur}
                                    isSelected={field.state.value}
                                    errorMessage={field.state.meta.errors.join("\n")}
                                />
                            )}
                        </form.Field>

<form.Field
                            name="readAgreement"
                            validators={{
                                onSubmit: z.boolean().refine((val) => {
                                    val === true
                                }, "Accept this"),
                            }}
                        >
                            {(field) => (
                                <Checkbox
                                    name={field.name}
                                    id={field.name}
                                    label={t("bookings.finalBookingView.agreementText")}
                                    onChange={field.handleChange}
                                    onBlur={field.handleBlur}
                                    isSelected={field.state.value}
                                    errorMessage={field.state.meta.errors.join("\n")}
                                />
                            )}
                        </form.Field>

Am I doing something wrong here?

In addition, if I define some native validation using the validators prop, it won't validate at all when I submit it.

Issues with validators (zod and native)

Type 'Validator<unknown, ZodType<any, ZodTypeDef, any>>' is not assignable to type 'undefined'.

Type 'Validator<unknown, ZodType<any, ZodTypeDef, any>>' is not assignable to type 'undefined'.

My form looks like this:

const form = useForm<InsertAppointmentSchemaInterface>({
        onSubmit: ({ value }) => {
            // some onSubmit logic here...
        },
        validatorAdapter: zodValidator(),
    })

const form = useForm<InsertAppointmentSchemaInterface>({
        onSubmit: ({ value }) => {
            // some onSubmit logic here...
        },
        validatorAdapter: zodValidator(),
    })

<form.Field
                            name="readAgreement"
                            validators={{
                                onSubmit: z.boolean().refine((val) => {
                                    val === true
                                }, "Accept this"),
                            }}
                        >
                            {(field) => (
                                <Checkbox
                                    name={field.name}
                                    id={field.name}
                                    label={t("bookings.finalBookingView.agreementText")}
                                    onChange={field.handleChange}
                                    onBlur={field.handleBlur}
                                    isSelected={field.state.value}
                                    errorMessage={field.state.meta.errors.join("\n")}
                                />
                            )}
                        </form.Field>

<form.Field
                            name="readAgreement"
                            validators={{
                                onSubmit: z.boolean().refine((val) => {
                                    val === true
                                }, "Accept this"),
                            }}
                        >
                            {(field) => (
                                <Checkbox
                                    name={field.name}
                                    id={field.name}
                                    label={t("bookings.finalBookingView.agreementText")}
                                    onChange={field.handleChange}
                                    onBlur={field.handleBlur}
                                    isSelected={field.state.value}
                                    errorMessage={field.state.meta.errors.join("\n")}
                                />
                            )}
                        </form.Field>

Am I doing something wrong here?

In addition, if I define some native validation using the validators prop, it won't validate at all when I submit it.

Issues with validators (zod and native)

Issues with validators (zod and native)

Similar Threads