[QUESTION] How to make sure SchemaFormFactory created the expanded SchemaForm?

[dheimoz]

Hello team:

This whole concept of having a Form Generator based on a JSON schema is awesome and so far has been a great experience. The documentation is very straightforward.

I am having a problem to understand how to implement the Vee-validate plugin. In Documentation is stated:

"First, import the SchemaFormFactory into your application."

Does it means that this import line should be placed on main.js? I did that and hope that is the correct way.

Then, there is a template example with the three plugin documenting that the order is important.

"The order in which you pass the plugins is important, as they will be applied in the order they are received."

I assumed that this code example can be used as a template for a SFC. I copied the contents and left only the VeeValidatePlugin({})

`

<script> import VeeValidatePlugin from "@formvuelate/plugin-vee-validate"; const SchemaFormWithPlugins = SchemaFormFactory([VeeValidatePlugin()]); export default { name:"SchemaFormWithPlugins", components: { SchemaFormWithPlugins, }, }; </script>

`

Saved as SchemaFormWithPlugins.vue

Then I imported the Component and use it

<template> <SchemaFormWithPlugins :schema="mySchema" v-model="formData" /> </template>

This is the schema:
const mySchema = shallowRef({ banco: { component: FormText, label: "A label", innerClass: "p-field p-col-12 p-md-3", validations: (value) => value && value.length > 10, }, });

And unfortunately, the validation object remains empty. Am I missing something? I assume that Field Validation should be out of the box with the provided validation.

Thanks for the great efforts.

[marina-mosti]

Hello @dheimoz

• SchemaFormFactory is a component, and should be imported into whatever parent component you are going to use it in - for example, App.vue.

I really wouldn't recommend using a subcomponent to extend SchemaFormWithPlugins, you can just use it directly where you use it. The biggest problem is that you're not correctly extending it, if you want to put it in a separate SFC file you'd probably have to use a render function

Just use const SchemaFormWithPlugins = SchemaFormFactory([VeeValidatePlugin()]) directly in your component, then you can set it as part of the components object and treat it as a normal component

[dheimoz]

Yes, I need to pay more attention on how to extend components and maybe reading more carefully instructions. Your solution worked as expected.

I will definitely add this use case in the documentation if you do not mind.

Thanks for you time @marina-mosti.