pleasant-yellow

How to handle nested object validation

I am using Zod to perform the validation, and I have confirmed, that all of the errors. I have the following schema:

const addressSchema = z.object({
    country: z.string().min(1),
    region: z.string().min(1),
    address: z.string().optional()
});
const contactSchema = z.object({
    firstName: z.string(),
    lastName: z.string(), 
    address: addressSchema
})

const addressSchema = z.object({
    country: z.string().min(1),
    region: z.string().min(1),
    address: z.string().optional()
});
const contactSchema = z.object({
    firstName: z.string(),
    lastName: z.string(), 
    address: addressSchema
})

I have stepped through the code, and can confirm that when country, and region are missing, the two keys are created for "address.country", and "address.region", You can even see the error message in the array when using looking at form.state.errors, how ever you cannot access the errors for address. The only way I can see to find the errors is to use the array of all error strings. Is there a way I am missing to get the errors for "address", or specifically "address.country" ect. (worth noting that when using form.getFieldInfo("adress") i get all the relevant information for this field except the errors, but calling form.getFieldInfo("address.country") returns instance of null,)

3 Replies

pleasant-yellowOP•11mo ago

Looking at the code deeper, it looks like it not possible, as the error state is not stored against the field. When setting the errors here, (https://github.com/TanStack/form/blob/f81eca743a6be8a2a462d5d574fcbc49e542b8c8/packages/form-core/src/FormApi.ts#L715)
it fetches the field meta using "address.country" as the key, how ever the field meta data is stored against "address", and with an undefined, it doesn't set the new states.

GitHub

form/packages/form-core/src/FormApi.ts at f81eca743a6be8a2a462d5d57...

🤖 Powerful and type-safe form state management for the web. TS/JS, React Form, Solid Form, Lit Form and Vue Form. - TanStack/form

pleasant-yellowOP•11mo ago

My current work around is to use a generic validation message on the addressSchema, and copy the zod-validation adapter to overrride the the transformed schema key:

schema.forEach((value, key) => {                    transformedSchema[key.split(".")[0]] = transformErrors(value);
});

schema.forEach((value, key) => {                    transformedSchema[key.split(".")[0]] = transformErrors(value);
});

adverse-sapphire•11mo ago

Can you please reproduce the issue in one of our stackblitz examples? There's one with zod already set up

Gaming

Programming

How to handle nested object validation

Did you find this page helpful?