Enhanced ux form of vuejs nation presentation

[JaavierR]

Hi @logaretm,

Today I saw your presentation about vee-validate, on the vue,js nation conference, and I have some questions about the enhanced UX form example that you presented, because I found it very interesting and I tried to replicate it. The main question that I have it's what's exactly that I need to pass to the emit when I reuse the component in order to trigger the validations? Because I think (I'm not sure, maybe I'm missing something) I also need to pass some props to register the current fields that need validation, i.e, one prop for schema and another to handle initValues if i need it. So now if I tried to submit the validation will trigger but I still don't know how I could manipulate the values once the form is valid.

I was trying with some custom components that i got defined via the useField so I don't tried yet with the components that come with vee-validate.

The example was this.

<template>
    <form @submit="onSubmit">
        <slot />
    </form>
</template>

<script setup>
import { defineEmits } from 'vue';
import { useForm } from 'vee-validate';

const { handleSubmit } = useForm();
const emit = defineEmits();

function onInvalidSubmit({ errors }) {
    const fieldName = Object.keys(errors)[0];
    const fieldEl = document.querySelector(`#${fieldName}`);
    fieldEl?.focus?.();
    fieldEl?.scrollIntoView();
}

const onSubmit = handleSubmit(() => {
    emit('submit');
}, onInvalidSubmit);
</script>

And thanks for your work! this library it has helped me a lot when need to handle validations in my foms.

[logaretm]

Hello and thank you for the kind words.

You can submit what you need here to the submit function, let's say you want to pass the form values in the submit event:

// vee-validate sends the values as the first argument to your handleSubmit success callback
// the values here are readonly
const onSubmit = handleSubmit((values) => {
    emit('submit', values);
}, onInvalidSubmit);

// or grab them from `useForm`
const { handleSubmit, values } = useForm();

const onSubmit = handleSubmit(() => {
    emit('submit', values);
}, onInvalidSubmit);

This will effectively pass the form data to the parent component using the submit event. But keep in mind that the values passed via the callback are cloned and any changes would be for the purpose of formatting it for the API, so consider these scenarios:

<MyForm @submit="onSuccess">
<!-- ... -->
</MyForm>


<script setup>
function onSuccess(values) {
  values.name = '3'; // this won't change the form values, you only receive a deep copy version of it
}
</script>

If you want to change some things in the form, then it could get more complicated here but it is still possible because you can also pass the form actions object to your parent which will allow it to change values, errors or reset the form if needed. This is covered here.

[JaavierR]

Hi, thanks for the explanation now everything it's clearer and I manage to create this reusable form.

But now I have a problem with typescript and I can't get the type inference for example in the values variable, unlike if I did it directly by passing to the useForm a validation schema. I started a couple of months ago with typescript so maybe I'm missing something. Attached are the code snippets I have at the moment. (also in this version I added scoped slots to have access to the functions and variables of useForm, as if using the Form component)

The Form Component is this:

<script setup lang="ts">
import { useForm } from 'vee-validate'
import type { Ref } from 'vue'
import type { SchemaOf } from 'yup'

type MaybeRef<T> = Ref<T> | T

interface FormProps<TValues extends Record<string, any>> {
    schema: MaybeRef<SchemaOf<TValues> | undefined>
    initialValues?: MaybeRef<TValues>
}

const props = defineProps<FormProps<Record<string, any>>>()
const emit = defineEmits<{ (e: 'submit', values): void }>()

const { handleSubmit, ...options } = useForm({
    validationSchema: props.schema,
    initialValues: props.initialValues,
})

// I use readonly because when I tried to access for example the isSubmittinh variable in the parent component
// I need to access it as if it were a reactive variable ->  {{ isSubmitting.value }}
const opts = readonly(options)

function onInvalidSubmit<T>({ errors }: { errors: T }): void {
    const fieldName = Object.keys(errors)[0]
    const fieldEl: HTMLInputElement | null = document.querySelector(
        `#${fieldName}`
    )

    fieldEl?.focus?.()
    fieldEl?.scrollIntoView()
}

const onSubmit = handleSubmit((values, ctx) => {
    emit('submit', { values, ctx })
}, onInvalidSubmit)
</script>

<template>
    <form @submit="onSubmit">
        <slot v-bind="opts"></slot>
    </form>
</template>

Now in the parent component I got the following.

<script setup lang="ts">
import { markRaw } from 'vue'
import type { SchemaOf } from 'yup'
import { object, string } from 'yup'

interface FormTest {
    name: string
    description: string
}

const schema: SchemaOf<FormTest> = markRaw(
    object().shape({
        name: string().required(),
        description: string().required(),
    })
)

const onSubmit = ({ values, ctx: { resetForm } }) => {
    alert(JSON.stringify(values, null, 2))
    resetForm()
}
</script>

<template>
    <AppForm v-slot="{ values }" :schema="schema" @submit="onSubmit">
        <AppInputWithValidation
            id="name"
            name="name"
            type="text"
            label="Full name"
        />

        <AppInputWithValidation
            id="description"
            name="description"
            type="text"
            label="Random description"
        />

        <button type="submit">Send</button>

        <pre>
            {{ values }}
        </pre>
    </AppForm>
</template>

So the problem I'm facing is that, when accessing the values variable for example, I don't have the hint that it contains the name and description properties, and it happens both in the template and in the onSubmit function.

Unlike when I used useForm in the parent component, that there typescript works without problems and I have the suggestions because it detects the type of data from the validation schema, but as I mentioned I think it is my problem that I am not defining the interfaces well perhaps, but I have searched a lot I have tried different ways and I can not get it so I comment here, I hope you can help me, thank you very much in advance.

[logaretm]

This is not a vee-validate issue, but a limitation in Vue component types. So far it is very hard to create generic components in Vue.js unless you are willing to do some hacks.

For such cases I use useForm instead of declarative form components, it is not ideal but nothing I can do about it at the moment.