v4.8.4

🐛 Bug Fixes

• properly unref the schema before checking for default values closes #4196 (8e3663d)

👕 TypeScript

• make initial values partial closes #4195 (eeccd0c)

🏗️ DX Improvements

• allow name ref to be a lazy function (8fb543a)

// no need to wrap this anymore with `computed` or with `toRef`.
const { value } = useField(() => props.name);

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

🐛 Bug Fixes

Fix a bug introduced in 4.7.4 where useField error messages ignored the names configuration in global i18n dictionaries #4164 (d5acff7)

v4.8.1

🐛 Bug Fixes

• Fixed an issue where a zod schema may produce undefined as a cast value #4186 (9f1c63b)
• Exposed errorBag on the <Form /> component (371744e)

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 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)

v4.7.4

🐛 Bug Fixes

• Fixed an issue where unique field/rule special messages didn't work when a label was provided #4097 (89f8689)
• ext rule using incorrect wildcard symbol (#4045) (5265af5)

👕 TypeScript

Exposed various types from the @vee-validate/i18n module #4106 (c65ead8)

🆕 Minor Features

• Added new resetField on useForm and <Form /> component slot props #4117 (87c4278)
• Exposed getValues and getErrors and getMeta on <Form /> component instance (#4121) (7f1c39c)

v4.7.3

🐛 Bug Fixes

• Updated excluded references in translation files with not_one_of #3993 (7fc5077)
• Use cloned value when setting field value via form #3991 (90b61fc)

v4.7.2

🐛 Bug Fixes

• Don't mutate validated meta when non-forced validation is run #3981 #3982 (6652a22)

v4.7.1

🐛 Bug Fixes

• clean up single group value after unmount #3963 (#3972) (8ccfd2b)
• correctly mutate deep field array item and trigger validation (#3974) (267736f)
• mark slot prop field value as any #3969 (#3973) (70ddc5b)

🌍 i18n

• Fixed wrong placeholder in CS localization (#3959) (a4603fa) thanks to @Liwoj

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,
});