Feature request: Nested validation error support #1
Description
Hello @jbaubree
First, thank you for this library — it’s really refreshing to have such a simple wrapper around Yup in Vue 3. It makes validation much more approachable for smaller projects without the boilerplate of heavier libraries like vee-validate.
While experimenting with more complex forms, I ran into a limitation regarding nested objects in the form state. For example:
const schema = object({
nested: object({
foo: string().required("Foo is required"),
bar: string().required("Bar is required"),
}),
});
const form = ref({
nested: {
foo: null,
bar: null,
},
});
When both fields under nested are invalid, the resulting errors object looks like this:
{ nested: "The field nested.bar is required" }
This means the error for foo gets overwritten by the error for bar.
What would be more useful is if the library preserved the nested structure, e.g.:
{
nested: {
foo: "Foo is required",
bar: "Bar is required",
}
}
This way, both errors could be displayed independently in the template.
Feature request
Would it be possible to enhance error handling so that nested object schemas produce nested error objects instead of flattening to a single key?
Even an option to switch between "flattened" and "nested" error structures would solve this problem nicely.
Thanks again for your work on this library. It already solves a lot of cases cleanly, and this addition would make it even more robust for complex forms.