Releases: logaretm/vee-validate
v4.8.3
🐛 Bug Fixes
- Fixed a bug with Zod's typed schema defaults logic that caused a crash sometimes #4186 (comment)
v4.8.2
v4.8.1
v4.8.0
🆕 New features
Yup and Zod typed schemas
You can now infer the input/output types from yup
and zod
validation schemas by using toTypedSchema
helper from @vee-validate/yup
and @vee-validate/zod
packages.
import { useForm } from 'vee-validate';
import { object, string } from 'yup';
import { toTypedSchema } from '@vee-validate/yup';
const { values, handleSubmit } = useForm({
validationSchema: toTypedSchema(
object({
email: string().required(),
name: string(),
})
),
});
// ❌ Type error, which means `values` is type-safe
values.email.endsWith('@gmail.com');
handleSubmit(submitted => {
// No errors, because email is required!
submitted.email.endsWith('@gmail.com');
// ❌ Type error, because `name` is not required so it could be undefined
// Means that your fields are now type safe!
submitted.name.length;
});
Same thing for zod
with the exception that zod requires all fields by default and you will need to mark them as optional
for it to reflect in the output type. Check the docs for more examples.
Aside from type inference, you can also assign default
values to form schemas using either schema libraries and you can also use yup
's transform
and zod's preprocess
to cast values.
Form's Error bag
The errorBag
is now exposed from useForm
which returns a record of the fields with their errors as an array, previously you could only grab one error per field but with this, you can render all errors for all fields.
const { errorBag } = useForm();
errorBag.email; // string[] or undefined
🐛 Bug fixes
- Return all errors from
yup
andzod
schema validations #3680 #4078 (c2e02b7) (f74fb69) - Sync initial model with
useField
's value #4163 (1040643) - Field arrays not changing when replaced by
setValues
orsetFieldValue
from the form's context #4153 (6e784cc) - Field array not updating the form's valid state when pushing/removing/replacing/etc... #4096 (044b4b4)
👕 TypeScript
v4.7.4
v4.7.3
v4.7.2
v4.7.1
v4.7.0
🆕 New Features
Controlled values filtering #3924
A good use-case is where you assign a bunch of values as initial values to your form but your inputs only control a few of them but it wasn't possible to extract these controlled values from all the values.
v4.7
Lets you do that using a few ways:
You can grab controlledValues
from useForm
result
const { handleSubmit, controlledValues } = useForm();
const onSubmit = handleSubmit(async () => {
// Send only controlled values to the API
// Only fields declared with `useField` or `useFieldModel` will be sent
const response = await client.post('/users/', controlledValues.value);
});
Or use withControlled
composed function:
const { handleSubmit } = useForm();
const onSubmit = handleSubmit.withControlled(async values => {
// Send only controlled values to the API
// Only fields declared with `useField` or `useFieldModel` will be sent
const response = await client.post('/users/', values);
});
vee-validate marks fields which were created using useFieldModel
or useField
(and <Field />
) as "controlled" and these would be the only values included in the previous samples.
Explict form context option #3204
Previously useField
and <Field />
components used implicit injections to resolve the form context they are part of. This prevented having multiple form contexts within the same component with useForm
since each call will take over the fields declared after.
Now when declaring fields with useField
you can pass form
option explicitly to assign that field to that form:
const form1 = useForm();
const form2 = useForm();
const field1 = useField('field', undefined, {
form: form1,
});
const ield2 = useField('field', undefined, {
form: form2,
});