T
TanStack•12mo ago
other-emerald

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.
1 Reply
secure-lavender
secure-lavender•12mo ago
Try passing the ZodValidator type aswell to useForm 
const form = useForm<InsertAppointmentSchemaInterface, ZodValidator>({
// …
})
const form = useForm<InsertAppointmentSchemaInterface, ZodValidator>({
// …
})

Did you find this page helpful?