logaretm/vee-validate v4.8.0

on GitHub

🆕 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 and zod schema validations #3680 #4078 (c2e02b7) (f74fb69)
• Sync initial model with useField's value #4163 (1040643)
• Field arrays not changing when replaced by setValues or setFieldValue from the form's context #4153 (6e784cc)
• Field array not updating the form's valid state when pushing/removing/replacing/etc... #4096 (044b4b4)

👕 TypeScript

• Exposed FieldState type #4159 (69c0d12)