Is it possible to support Zod array and Zod object for Vue 3 validation?

[KoichaDev]

Hello community,

I've been looking for information on how to use z.object() and z.array() with Tanstack Form, but I haven't had much luck finding relevant examples on the Tanstack Form Documentation or through Google searches.

I’m specifically trying to validate a form with the following Zod schema:

const zodSchemaValidation = z.object({
  user: z.object({
    firstName: z.string().min(3).max(5)
  }),
  location: z.array(z.object({
    address: z.string().min(3),
    city: z.string().min(3)
  }))
});

Most of the information I've come across deals with validating individual fields directly. For instance, the documentation for Vue shows how to validate the firstName field like this:

<form.Field
  name="firstName"
  :validators="{ 
    onChange: z // here is the direct field
      .string()
      .min(3, 'First name must be at least 3 characters'),
    onChangeAsyncDebounceMs: 500,
    onChangeAsync: onChangeFirstName,
  }"
>
  <template v-slot="{ field, state }">
    <label :htmlFor="field.name">First Name:</label>
    <input
      :id="field.name"
      :name="field.name"
      :value="field.state.value"
      @input="
        (e) => field.handleChange((e.target as HTMLInputElement).value)
      "
      @blur="field.handleBlur"
    />
    <FieldInfo :state="state" />
  </template>
</form.Field>

Does anyone know if it's possible to use z.object() and z.array() with Tanstack Form to validate a schema with this structure? Any guidance or examples would be greatly appreciated!

[Balastrong]

As of today field validator are explicitly passed to their fields as the examples shows, however with #656 we're working on expanding the form validator to directly inject validators and errors into the fields.

In the meantime you can still use your object defining all fields and validators in one place, and pass the references in your components, like so:

Your schema defined anywhere in your code

const MyObjectSchema = z.object({
  firstName: z.string().min(3, 'First name must be at least 3 characters'),
  //... other fields
});

And then the reference in your form validators

<form.Field
  name="firstName"
  validators={{
    onChange: MyObjectSchema.shape.firstName,
...
/>

[KoichaDev]

As of today field validator are explicitly passed to their fields as the examples shows, however with #656 we're working on expanding the form validator to directly inject validators and errors into the fields.

In the meantime you can still use your object defining all fields and validators in one place, and pass the references in your components, like so:

Your schema defined anywhere in your code

const MyObjectSchema = z.object({
  firstName: z.string().min(3, 'First name must be at least 3 characters'),
  //... other fields
});

And then the reference in your form validators

<form.Field
  name="firstName"
  validators={{
    onChange: MyObjectSchema.shape.firstName,
...
/>

Thanks for the reply! Looking really forward to this upcoming feature!