Releases: logaretm/vee-validate
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
yupandzodschema validations #3680 #4078 (c2e02b7) (f74fb69) - Sync initial model with
useField's value #4163 (1040643) - Field arrays not changing when replaced by
setValuesorsetFieldValuefrom 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,
});