TanStackT
TanStack•3mo ago•
99 replies
popular-magenta

form composition with custom validation

I'm currently doing forms with custom (per field) validation with zod, which works kinda ok. typical pattern is:

            <form.Field
              name="name"
              validators={{
                onSubmit: ({ value }) => {
                  const parsed = createUserSchema
                    .pick({ name: true })
                    .safeParse({ name: value })

                  return parsed.error?.issues
                },
              }}
            >
              {(field) => (
                <Field>
                  <FieldLabel htmlFor="name">Name</FieldLabel>
                  <Input
                    id="name"
                    value={field.state.value}
                    placeholder="Enter name..."
                    required
                    onChange={(e) => field.handleChange(e.target.value)}
                    onBlur={field.handleBlur}
                  />
                  <FieldError errors={field.state.meta.errors} />
                </Field>
              )}
            </form.Field>


and until now, while verbose, i was kinda ok with that. but new form i'm working on needs to be split into sub components.

I have found the "choose your api" chart in https://tanstack.com/form/latest/docs/framework/react/guides/form-composition#api-usage-guidance

and it seems that it's not possible to continue using 
useForm
 and custom validation functions with form composition, or am i mistaken?
Was this page helpful?