vee-validate
vee-validate copied to clipboard
Extend meta object from useForm with meta state per field
Is your feature request related to a problem? Please describe.
When building a form, it's a good UX practice to show the validation state of a field as indeterminate until the user has finished typing. Currently, this is not possible when using useForm
, because the meta object only contains the dirty and touched states for the entire form.
This is also inconsistent with useForm
s objects values
and errors
, which are objects with keys of each field.
Describe the solution you'd like
I propose to be able to do the following:
const { meta } = useForm({
firstName: string().required(),
lastName: string().required()
})
Which would give me the state for the form as a whole plus the meta for each field included:
const meta = {
dirty: true,
pending: false,
touched: true,
valid: false,
// keys with the meta for each field
firstName: {
dirty: true,
pending: false,
touched: true,
valid: true,
},
lastName: {
dirty: false,
pending: false,
touched: false,
valid: false,
},
};
This solution would allow me to pass specific meta details to each field's component, without having to rely on useField
, making the code more compact.