Vue - Best practice for reactive Zod schemas in useForm #1898
-
|
Hi there, I'm using Zod for validation. I have a scenario where my validation schema needs to be reactive because it depends on asynchronous data (e.g., a user's wallet balance loaded from a hook). The Problem const { uiBalance } = useBalance(); // Async data
// Schema depends on uiBalance
const schema = computed(() => {
return z.object({
amount: z.number().max(uiBalance.value),
});
});
const form = useForm({
defaultValues: { amount: '' },
validators: {
// ❌ This loses reactivity. It uses the initial schema snapshot.
onChange: schema.value,
},
// ...
});Question |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
for those who wondering i ended up uses this approach: onChange: ({ formApi }) => {
const errors = formApi.parseValuesWithSchema(schema.value);
if (errors) return errors;
}, |
Beta Was this translation helpful? Give feedback.
for those who wondering i ended up uses this approach: