logaretm/vee-validate v4.7.0

on GitHub

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