How to use vee-validate composition API to use the entire form fields in one reactive object?

[Brunnn]

Instead of using defineInputBinds for every field, how can i get the entire object model of the useForm:

  const {
      errors,
      values, //Can't modify values directly, it's read-only
      handleSubmit,
  } = useForm<SetCheckoutUserinfoBody>({
      validationSchema: mySchema,
  });

I want to expose one reactive object that contains all the form fields, like:

  const {
      errors,
      values,
      defineInputBinds,
      handleSubmit,
  } = useForm<SetCheckoutUserinfoBody>({
      validationSchema: mySchema,
  });

 const model = defineInputBinds();
 const.field1 //Access to all fields.

Is that possible? i did not find anything about it in the docs.

I want to use it like this so I don't lose the type check on the model properties of my schema. I know i can make use of the Declarative way of vee-validate in custom inputs, but then I would pass the form model properties as a string in the "name" attribute, completely losing the property does not exist in X typescript error.

One workaround i tought about was creating a reactive variable and than using a watcher on it, so when it changes i would use the vee-validate setValues to change the form context values, but i don't think that is the best approach. Would love a opinion on how to use vee-validate in the "type safe way".

EDIT: i've just tested my workaround with a watcher on a reactive variable that would call the setValues from vee-validate, it works, but this function doesn't seem to be triggering the validations on the form, i need to call validate manually, is this intended? The docs says otherwise:

Here is the example code:

const defaults: SetCheckoutUserinfoBody = {
    email: "",
    phone: "",
    CPF: "",
    name: "",
};
const { errors, setValues, errorBag, values, meta, validate, handleSubmit } = useForm<SetCheckoutUserinfoBody>({
    validationSchema: toTypedSchema(
        z.object({
            email: z.string().nonempty("Email é obrigatório").email("Insira um email válido"),
            phone: z.string().nonempty("Celular é obrigatório").min(15, "Insira um celular de contato válido"),
            CPF: z.string(),
            name: z.string(),
        })
    )
});

const body = ref<Partial<SetCheckoutUserinfoBody>>(defaults);
watch(
    () => body.value,
    (newValue) => {
        setValues(newValue);
    },
    { deep: true }
);

setValues is setting the form dirty but not updating the valid flag, am I missing something?

[logaretm]

setValues doesn't validate as of 4.10 which is a bug. I will try to fix that shortly, it will accept an option whether you want to validate or not. I created an issue to track it here #4359

As for the original question, there are no reactive form values because how would you deal with nested values inside arrays? Flat objects or nested objects are straightforward but nested arrays usually cause the problem here and are not possible to use with TypeChecks since [0] could always be undefined and v-model doesn't work with nested undefined paths.

So if the workaround you did works for you, then it is all good, use it but be careful with arrays and similar scenarios.

[Brunnn]

Thanks for the fast response logaretm!
Well, I don't really get why that would be a concern to the library itself, since the developer would have to make sure the values are properly assigned anyway. It would be great to have a single reactive object exposed.
Could you give me an example on where this approach would cause problems?
Couldn't you make values a modifiable reactive variable and let the user change it as it likes, of course, poiting out those concerns that you said. Using it like that makes it easy to use Typescript features such as property checking and manage codebase changes in files.

[re2005]

Maybe this is something you can take a look?

https://stackblitz.com/edit/vee-validate-v4-pinia-jmanfe?file=src%2FApp.vue,src%2FFormRef.vue,src%2Fstore-ref.ts

[re2005]

Hey @logaretm

Another question here:
https://stackblitz.com/edit/vee-validate-v4-pinia-jmanfe?file=src%2FApp.vue,src%2FFormRef.vue,src%2Fstore-ref.ts%3AL29

I'm using defineInputBinds but it's deprecated, so I'm wondering the proper way of doing it?

I've tried defineField but it returns not the same as expected in defineInputBinds.

Any help is very welcome!