Vue-formulate: Request: a way to use `FormulateForm` without having it render a `form`

[codekiln]

For a work project I'm working on, I already have an existing <form> with a lot of common fields (not defined in vue).

Within that common form, there are a sub-set of fields that are customized according to the type of thing the form applies to.

For example, picture a product form, where there are common product form fields, as well as special form fields just for products of type DVD, and other special form fields for products of type Book.

I would like to use Vue Formulate to manage validation for the portion of the form that pertains to these type-specific form fields. The only issue is that <FormulateForm> uses a <form> element, which is then nested inside of the outer <form> element, which isn't valid HTML5.

Do you see any workaround for this use case?

[justin-schroeder]

You could use a group type. It's uses the same registry code as the FormulateForm, so if all you want is grouped validation you could use a non-repeatable group and manually validate the group by assigning a ref.

</template>
  <FormulateInput
    type="group"
    ref="specialFields"
  >
    // ... your fields here my liege
  </FormulateInput>
<template>

<script>
export default {
  methods: {
    async validate () {
      const isValid = await this.$refs.specialFields.hasValidationErrors()
    }
  }
}
</script>

Obviously with your own fields and logic. I would recommend calling that hasValidationErrors() on the parent <form> element submit event. This is actually important for accessibility and other concerns since forms can be submitted lots of ways other than clicking the "submit" button (hitting enter in a text field for example) and you want to make sure your validation errors are being caught there too.

[codekiln]

This makes sense, thanks for the tip.

I was hoping to be able to use a grouped, nested v-model, but I haven't been able to get that to work with FormulateInput of type group:

1. Working codepen - using v-model to set initial values with typical <formulate-form v-model="formData">: https://codepen.io/codekiln/pen/ExPEoGY
2. Not working codepen - using v-model to set initial values with <formulate-input type="group" v-model="formData">: https://codepen.io/codekiln/pen/vYLRpbx

There might be something I'm missing here - is there a way to use v-model with FormulateInput of type group without using FormulateForm?

[andrew-boyd]

@codekiln, I was able to get your codepen working with v-model on FormulateInput of type group. The main issue is that groups always return an array of objects, even if there is only a single set of results, so wrapping your formData data property in [] did the trick.

https://codepen.io/boyd/pen/wvMmmxG?editors=1111

There's a discussion happening in #145 around allowing plain objects in groups which seems to be the behavior you were expecting.

as a side note, your codepen was not rendering for me initially until I updated it to the latest release version of Vue Formulate.

[codekiln]

Wow, thanks so much @andrew-boyd! Got it.

[codekiln]

I did end up finding that getFormValues didn't return the values associated with a v-model on a FormulateInput of type group, which I think is one limitation here.

[justin-schroeder]

@codekiln hmmm. That shouldn't be the case — if it is then it's a bug. Would you be able to create a reproduction?

[codekiln]

I've opened a bug here with a reproduction: https://github.com/wearebraid/vue-formulate/issues/168