Vee Validate Versions Save

👕 TypeScript

This release is aimed at resolving #4421

• useForm#defineComponentBinds is now more strict and provides accurate typings for both modelValue and update:modeValue properties. Previously they were not exposed.

Try the following example.

const { defineComponentBinds } = useForm({
  validationSchema: toTypedSchema(yup.object({
    date: yup.date().required(),
    number: yup.number().required(),
    string: yup.string().required(),
    valueModel: yup.string().required(),
  })),
});

const date = defineComponentBinds('date');
const number = defineComponentBinds('number');
const string = defineComponentBinds('string');
const valueModel = defineComponentBinds('valueModel');

🐛 Bug Fixes

The latest release introduced a bug with detecting external changes to models when the default updateOnValueUpdate is set to true. This release fixes that #4404 (804ec6faa5effeda45187adefe380a9c8be89aec)

🐛 Bug fixes

• Silent validation should not mark a field as validated ( b53400e2)
• Clone the schema object before validating typed schemas to avoid outputting proxies #4459 (8f680bf1)
• Respect validateOnModelUpdate configuration #4451 #4467 (5231f439)

🆕 New features

• feat: added reset options to force values changing to the given values without merging the old ones #4440 (4d8ed7eb)

This release updates valibot support to v0.13.0 and replaces the usage of deprecated API methods. #4414 (#4415)

🆕 New features

You can now query fields meta state using isFieldTouched, isFieldDirty, and isFieldValid helpers on useForm.

const { isFieldDirty } = useForm();

isFieldDirty('myField') // true or false

// or compose it to be reactive:
const isFieldDirty  = computed(() => isFieldDirty('myField'));

🐛 Bug Fixes

• Do not warn if a form or a field was resolved closes #4399 (2ff045c1)

👕 Types

• Expose all internal types #4409 (73219b40) (4947e88f)

🐛 Bug fixes

• handleChange should now infer value as a number from Input type range (5e23dcb92db38cc33e66cb6e22706ffda9c477d2)

This release contains a couple of new features

🆕 Composition API setters

Added composition functions to set field and form values, meta, and errors from their child components. The functions are:

• useSetFieldValue: sets a field's value.
• useSetFieldTouched: sets a field's touched state.
• useSetFieldError: sets a field's error message.
• useSetFormValues: sets form values.
• useSetFormTouched: sets multiple or all fields touched state.
• useSetFormErrors: sets form error messages.

🆕 Initial support for Valibot

Valibot is an impressive new schema validation library, mainly it offers Zod-like features at a much less bundle size due to its non-chainable API while still being easy to use and fully typed.

Because of this, vee-validate now supports it as a schema provider using the @vee-validate/valibot package that exposes the same API function toTypedSchema that you can use to get TypeScript support into your forms input and output values.

Quick example:

import { useForm } from 'vee-validate';
import { toTypedSchema } from '@vee-validate/valibot';
import { email, string, minLength, object } from 'valibot';

const { errors, values } = useForm({
  validationSchema: toTypedSchema(
    object({
      email: string([minLength(1, 'Email is required'), email()]),
      password: string([minLength(6, 'password too short')]),
    }),
  ),
});

Refer to the docs for live examples and more information on typed schemas.

👕 Types

• Fixed a type issue where setErrors did not accept an array of strings #4396 (c02337f33bbd062177de969df4448abdfb295cc8)

💨 Performance improvement

• Improve setFieldError and setFieldValue performance #4382 (c511385614bb7764e2d2af4dc366a769c5b1563d) (a9a473b439d2bb7aa3dce1c10d3a56f3139d1128)

🐛 Bug fixes

• Clone values inserted into field arrays #4372 (9290f5a9)
• Do not warn if the validation is for auto-removed paths #4368 (93f8001a)