Building a Form Generator + handle submit event

[alinnert]

I'm new to vee-validate and I was looking into the "Build a Form Generator" tutorial. This seems very useful because the app I'm working on has a lot of forms. But the example doesn't handle form submission and I don't know how to add that. I know how to handle submission using useForm but this uses a completely different approach. Instead of a single form there are many individual fields. How does vee-validate know which of those fields belong to a form? And how can I access those fields and validate them when I submit a form?

Currently I'm having a fields array like this:

const fields = [
  { type: 'input', name: 'email', label: 'email', rules: yup.string().email().required() },
  { type: 'input', name: 'password, label: 'password', rules: yup.string().required() },
]

A form component (let's call it FormBuilder.vue) currently contains a CForm component (the CoreUI form component) and it loops over the fields in that array above and outputs another custom form field component (let's say FormBuilderField.vue) for each item.

That custom form field component defines a field like this:

const { value, errorMessage, meta } = useField(() => props.name, props.rules)

And it outputs more CoreUI form components like CFormInput depending on the configuration.

I think I need to attach a listener to the CForms submit event. But what do I need to do inside that handler?

[alinnert]

I did the following now (in my FormBuilder.vue component) which seems to do what I expect it to do:

const { fields } = defineProps<{ fields: FormField[] }>()

const emit = defineEmits<{
  (event: 'submit', payload: { values: Record<string, any>, ctx: SubmissionContext<any> }): void
}>()

// This converts the fields array to an object schema.
const schema = computed((): Schema => {
  const obj: Record<string, Schema> = {}

  for (const field of fields) {
    // I apply the label here so I don't have to repeat it in the fields array
    obj[field.name] = field.rules.label(field.label)
  }

  return yup.object(obj)
})

// Create a new form with the new object schema
const { handleSubmit } = useForm({ validationSchema: toTypedSchema(schema.value) })

// Handle the submit event (and emit a new one in this case)
const submitHandler = handleSubmit((values: Record<string, unknown>, ctx) => {
  emit('submit', { values, ctx })
})

Is this how this case is supposed to be handled?