vee-validate
vee-validate copied to clipboard
Issue with Schema Mutation Using `.transform()` in conjunction with `initialValues` from `useForm()`
What happened?
I'm encountering an issue with the .transform() method in schemas and initialValues when dealing with differing input and output schemas.
To illustrate, consider the following schema:
const schema = z.object({
foo: z.string(),
bar: z.string(),
zoo: z.string(),
}).transform((data) => {
return {
pluto: data.foo + data.bar + data.zoo,
}
})
The problem arises when initializing the form with initial values for all fields. The schema is altered, adding pluto
as a new field in the form:
Despite re-entering the values, this issue persists:
This makes the validation fail.
Currently, my workaround involves using two separate schemas: one standard and one transformed with .transform(). Before submitting data, I parse the values using the transformed schema.
Based on my observations in the developer tools, this behavior doesn't seem intentional.
For a demonstration of this issue, please visit: https://stackblitz.com/edit/vitejs-vite-r9mxtn?file=src%2FApp.vue
Reproduction steps
- define a schema and apply the
.transform()
function, returning a new fieldpluto
- set the
initialValues
forfoo, bar, zoo
- check the vee-validate debug tools
Version
Vue.js 3.x and vee-validate 4.x
What browsers are you seeing the problem on?
- [X] Firefox
- [X] Chrome
- [X] Safari
- [X] Microsoft Edge
Relevant log output
No response
Demo link
https://stackblitz.com/edit/vitejs-vite-r9mxtn?file=src%2FApp.vue
Code of Conduct
- [X] I agree to follow this project's Code of Conduct
To add on this: resetForm()
is affected too!
Going through the code, it seems like this behavior cannot be "fixed". Zod always applies the transformations when parsing, if the object structure changes, then the bug appears.
The solution in my case is to have a separate schema with the transform and apply the parse before sending the data to the endpoint.
You are right, parsing will occur only at initialization or submission, I considered going all the way with this by re-parsing the schema everytime validation occurs but it is not reliable and transformations may result in fields being mismatched with their paths.
So a separate parsedValues
may sound like a viable approach here, marking this as an enhancement.
You are right, parsing will occur only at initialization or submission, I considered going all the way with this by re-parsing the schema everytime validation occurs but it is not reliable and transformations may result in fields being mismatched with their paths.
So a separate
parsedValues
may sound like a viable approach here, marking this as an enhancement.
What about adding an optional parameter to the toTypedSchema()
that accepts a zod .transform()
function as a callback, and use it within the handleSubmit
?
A separate parsedValues
returned from the useForm()
composable would be great too!