Describe the bug
The props that are passed to the field components (i.e. FormText) lose their reactivity.

To Reproduce
Make a schema with at least one reactive property. For instance:

const myRef = ref('initial label')

const schema =  {
   myField: {
    component: FormText,
    label: myRef
  }
}

setTimeout(() => myRef.value = 'updated label', 1000)

Expected behavior
The FormText component should receive a reactive label prop. In this case it would get updated to the new value after 1s.

System Info

• FormVueLate version: 3.1.1
• plugins being used with versions:

Additional context
I think the issue lies in how the SchemaField props get destructured into the binds object, losing the reactivity.
I spent some time with it but I could not find an easy fix.

If i use an already conditioned model in a condition it gives TypeError: Cannot read property 'model' of undefined.

Example:
https://codesandbox.io/s/fvl-conditional-schema-with-schema-condition-3x-forked-rw5vo?file=/src/App.vue:1540-1599

Tried versions:
3.2.1 - 3.2.3

Discussed in #231

Feature request or question

I'm trying to load the schema from an external source in valid JSON format. However, FormVueLate is using an invalid JSON schema for form generation.

Is there a way to convert to and from JSON, or is there a plan to make the scheme valid JSON?

Valid JSON

"schema": [
        {
          "component": "FormText",
          "label": "First Name",
          "model": "firstName"
        },
        {
          "component": "FormText",
          "label": "Last Name",
          "model": "lastName"
        }
]

Current schema used in FormVueLate:

const SCHEMA = [
  [
    {
      component: FormText,
      label: "First Name",
      model: "firstName",
      style: "margin-right: 10px",
    },
    {
      component: FormText,
      label: "Last Name",
      model: "lastName",
    },
  ],...

In the schema documentation about the component property it currently says (emphasis mine)

You can use the name of the component as a String instead, for example 'FormText', but be aware that the component needs to either be imported globally, or in your file first.

As a consequence, I tried to register the custom components locally in my component using formvuelate's SchemaForm and identify the components to use by string (to get a green tick in the "code-free schema" column of my decision matrix) - which did not work.

This is somewhat expected (now) knowing that formvuelate merely is using vue's :is special attribute and that, per the vue documentation (sic),

locally registered components are not also available in subcomponents

in vue 3.

The reference implementation featured in e.g. the "Validating Schema-Driven forms with Vuelidate" blog post also uses global registration.

So maybe the documentation should just suggest global registration. Or is there another way I'm missing?

Hello,

Can you give me an hand to get working vee-validate one_of ?
I'm using the following code. Validation is working well except "one_of" rule. I use it to check passwords are same before sign up. It looks that "one_of" rule doesn't get password current value.

const userData = reactive({
  name: '',
  email: '',
  password: ''
});

const SCHEMA = {
  password: {
    component: 'FormText',
    type: 'password',
    placeholder: 'password',
    validations: { required, min: {length: 8}  },
  },
  confirmPassword: {
    component: 'FormText',
    type: 'password',
    placeholder: 'confirm-password',
    validations: { required, min: {length: 8}, one_of: userData.password  },
  },
};

useSchemaForm(userData);
const schema = computed(() => { return SCHEMA });

Hello!

This is probably a stupid question, but I can't seem to figure out how I can set a default value for my form fields. Can you provide an example on how to achieve this?

Describe the bug
When using local imports along with the vee-validate plugin, the form does not render. Removing vee-validate allows it to render.

I've setup a sandbox below that allows the vee-validate plugin to be toggled on and off.

To Reproduce

• Visit: https://codesandbox.io/s/fvl-local-imports-with-validation-3o2e4?file=/src/App.vue
• Change line 18 from false to true (form will disappear)

Expected behavior
The form should render with or without the vee-validate plugin

System Info

• FormVueLate version: 3.7.1
• Vee Validate Plugin version: 3.7.1
• Vee Validate version: 4.5.5

Hello,

I need wrap fields into a "div" inside form tag?
Can you give me an hand?

It looks that schemaForm generate form tag.

Regards

Describe the bug
When reproducing this example: https://formvuelate.js.org/#schemaform-with-v-model
with an Array-schema as the value changes computed property is updated (i can see that in devtools) but the rendered form is untouched

To Reproduce
try to use the following computed schema in the vmodel conditional-schema example
https://github.com/formvuelate/formvuelate/blob/main/.vitepress/docs/components/ExampleVModel.vue

const schema = computed(() => {
      return formData.value.type === "A"
        ? [
            {
              component: "form-select", //FormText,
              label: "Schema A or B?",
              options: ["A", "B"],
              model: "type"
            },
            {
              component: "form-text",
              label: "A field",
              model: "aField"
            }
          ]
        : [
            {
              component: "form-select", //FormText,
              label: "Schema A or B?",
              options: ["A", "B"],
              model: "type"
            },
            {
              component: "form-text",
              label: "b field",
              model: "bField"
            }
          ];
    });

try changing the value of the select

Expected behavior
The A field mutates in B field on screen

System Info

• FormVueLate version: 2.0.0

Additional context

Hello,

I'm unable to get it running basic example as some files are missing.
Can you provide following files and example to use into an existing vue project.

import OutputDisplay from './OutputDisplay'
import FormText from './form-elements/FormText'
import FormSelect from './form-elements/FormSelect'
import FormCheckbox from './form-elements/FormCheckbox'

Thank you

Hi there!

First of all, great work! I have recently discovered formvuelate and i love it.

I am a beginner with vue 3 and your fabulous library. I am aware that my demand is due to lack of my own js and vue 3 knowledge. Nevertheless i would appreciate an addition to the examples in the documentation about using the schemawizard with the validation libraries/plugins. I imagine this could also be of help to others.

Regards, Dave

On the codesandbox playground (fvl-playground-3x) there is a "work" part both in Object and Array schema but it not appears anywhere on the "rendered" side. Do i miss something? Is it intended?

What do you think is it possible to achive that (in the current version) for example the labels changeing when i switch the language in the i18n switcher?

In my first try the initial load is working, so default language is EN and using the vue-i18n's t function in scheme's label property it loads the correct translation. But when i switch the language nothing happens.
I have ideas why not but before i getting deep into it i'd like to ask you that what's your opinion it has a possibility to get it work?

My scheme:

const formSchema = {
  email: {
    component: FormText,
    label: i18n.global.t("login.email"), //initialy loads "E-mail address" for label
  },
  password: {
    component: FormText,
    label: i18n.global.t("login.pw"), //initialy loads "Password" for label
  }
}

Describe the bug
When nested schema with conditions are used, model cleanup on schema change throw this error :
Cannot read property 'split' of undefined
To Reproduce

1. Create a nested schema with preventModelCleanupOnSchemaChange on true
2. Use condition property to conditionally display a field
3. Fulfil condition, the field display correctly
4. Unfulfil condition, formvuelate try to cleanup model and throw an error

Expected behavior
The field should disappear with model cleanup

System Info

• FormVueLate version: 3.5.0
• plugins being used with versions:
  @formvuelate/plugin-vee-validate: 3.4.0
  vee-validate : 4.4.9

Additional context
findNestedFormModelProp expect formModel on first param

And we do not provide it in findNestedFormModelProp

Expected behavior
I'm trying to get this to render the form.

System Info

• FormVueLate: Latest
• plugins being used with versions: None

Describe the bug
Here is the bug:

Uncaught (in promise) TypeError: Cannot read property 'lastName' of undefined
    at setup (formvuelate.umd.js?5d8f:377)
    at callWithErrorHandling (runtime-core.esm-bundler.js?9e79:154)
    at setupStatefulComponent (runtime-core.esm-bundler.js?9e79:6419)
    at setupComponent (runtime-core.esm-bundler.js?9e79:6380)
    at mountComponent (runtime-core.esm-bundler.js?9e79:4118)
    at processComponent (runtime-core.esm-bundler.js?9e79:4094)
    at patch (runtime-core.esm-bundler.js?9e79:3712)
    at mountChildren (runtime-core.esm-bundler.js?9e79:3894)
    at processFragment (runtime-core.esm-bundler.js?9e79:4054)
    at patch (runtime-core.esm-bundler.js?9e79:3705)

To Reproduce
Here is the code:

<template lang="pug">
div
  SchemaForm(:schema='schema', v-model='formData')
</template>

<script>
import { ref } from 'vue'
import { SchemaForm } from 'formvuelate'
import FormText from 'src/components/FormVueLate/FormText.vue'
export default {
  components: { SchemaForm },
  setup() {
    const schema = ref({
      lastName: {
        component: FormText,
      },
    })
    const formData = ref({})

    return {
      schema,
      formData,
    }
  },
}
</script>

Describe the bug
Default values with value "false" are not added to model during initialization.

To Reproduce
I added an example here: https://codesandbox.io/s/fvl-boolean-defaults-m714e?file=/src/App.vue

const SCHEMA = [
  {
    model: "select_default_true",
    component: FormCheckbox,
    label: "Default is true",
    default: true,
  },
  {
    model: "select_default_false",
    component: FormCheckbox,
    label: "Default is false",
    default: false,
  },
];

Expected behavior
I would expect a model with the values:

{
  "select_default_true": true,
  "select_default_false": false
}

but i get:

{
  "select_default_true": true,
}

System Info

• FormVueLate version: 3.6.3
• plugins being used with versions: -

Additional context
Maybe the check for defaults has to be extended with something like ... || typeof(default==='boolean')
By the way, thanks for the new feature with the defaults. This is very helpful and makes custom solutions obsolete.

I read the docs about 5 times and can't figure out how to add custom error message texts to validations.

For example i have a required field:

<template>
  <SchemaFormWithValidation :schema="formSchema" />
</template>

<script setup>
...
  import {
    SchemaForm,
    useSchemaForm,
    SchemaFormFactory,
  } from "formvuelate";
  import VeeValidatePlugin from "@formvuelate/plugin-vee-validate";
...
  const SchemaFormWithValidation = SchemaFormFactory([
    VeeValidatePlugin({}) 
  ]);
...
  const formSchema = {
    requiredField: {
      component: FormText,
      label: "a required filed",
      validations: "required",
    },
  }
...
</script>

And in the validation.errorMessage i got requiredField is not valid.

I also have a @vee-validate/i18n compatible json file that i happily use here if possible 🙂 .

When using schema condition i think when the condition result gets to false then any previous inputed value should have destroyed/cleared.

Example:

const formData = ref({});
useSchemaForm(formData);

const formSchema = {
  example: {
    component: FormSelect,	
    label: "Choose...",
    options: ["1", "2"]
  }
  one: {
    component: FormText,
    label: "One",
    condition: model => model.example === '1'
  },
  two: {
    component: FormText,
    label: "Two",
    condition: model => model.example === '2'
  }
}

Steps:

1. As "1" is selected on load the "one" FormText is visible. Write something in it.
2. In FormSelect choose "2" and then "two" FormText gets visible, but the value that we write in "one" FormText is still in the
   formData.

Also here:
https://formvuelate.js.org/examples/#conditional-fields-with-schema
when aField or bField data added it stays there forever without manualy deleting it.

Hi and thank you for this great library.

I was wondering if it's possible to add labels for fields group ? Or do I have to inject them manually with a plugin ?

[
  {
    model: 'user',
    component: markRaw(SchemaForm),
    label: 'Label for fields group here',
    schema: [ ...fields ],
  },
  { ... }
]

Thanks in advance !

Describe the bug
From the last example at https://formvuelate.js.org/guide/veevalidate.html#component-requirements :

    <span v-if="validation.touched">{{ validation.errorMessage }}</span>

.. is incorrect. Instead, it should be:

    <span v-if="validation.meta.touched">{{ validation.errorMessage }}</span>

First of all: Thanks for the great library!
Not sure if this is a bug that relates to the formvuelate library or the lookup plugin.
Maybe the bug relates to different problems. I name them [A] and [B].

Describe the bug
It seems that the field lookup does not work in nested schemas.

To Reproduce
[A]
I modified the codepen example here:
https://codesandbox.io/s/fvl-nested-schema-3-x-forked-tq9zl?file=/src/App.vue
You can uncomment/comment the lines 40 and 41 to reproduce it.

Expected behavior
I would expect that the following would work as well, but the field in the nested schema is not rendered.
I`m also refering to the example in the guide for nested schemas: https://formvuelate.js.org/guide/lookup.html#nested-schema-caveats

const SchemaFormWithPlugins = SchemaFormFactory([
    LookupPlugin({
        mapComponents: {
          Text: FormText,
        }
    })
])

const SCHEMA = [
  {
    model: "firstName",
    component: "Text",
    label: "First Name",
  },
  {
    model: "nested",
    component: SchemaForm,
    schema: [
      {
        model: "nestedfirstName",
        component: FormText, // this works
        // component: "Text", // this does not work
        label: "First Name nested",
      },
    ],
  },
]

[B]
Please note that the solution to mapComponent in the SchemaFormFactory described here https://formvuelate.js.org/guide/lookup.html#nested-schema-caveats did not work in my case.

If this is applied, it seems that the nested schema is not rendered at all:
https://codesandbox.io/s/fvl-nested-schema-3-x-forked-s3s50?file=/src/App.vue

const SchemaFormWithPlugins = SchemaFormFactory([
  LookupPlugin({
    mapComponents: {
      SchemaForm: "SchemaFormWithPlugins",
      Text: FormText,
    },
  }),
]);

const SCHEMA = [
  {
    model: "firstName",
    component: "Text",
    label: "First Name",
  },
  {
    model: "nested",
    component: SchemaForm, // this works
    // component: "SchemaForm", // this does not work
    schema: [
      {
        model: "nestedfirstName",
        component: FormText, 
        label: "First Name nested",
      },
    ],
  },
];

System Info

• Formvuelate version: 3.1.0
• plugins being used with versions:

"@formvuelate/plugin-lookup": "^2.1.0",
"@formvuelate/plugin-vee-validate": "^2.2.1",

Thanks for any help!

Hello,

first of all I'd like to thank you for this awesome library as there are not many out there focussing on schema based form generation for Vue 3 so I am really glad I have stumbled upon this one!

What I've also stumbled upon is a weird issue(?) with the following schema:

CodeSandbox of the issue

Once using a nested schema (with default values!) in a nested array schema, the following schema parts are getting nested as well in the form data. Could someone please elaborate on this one? Once removing the default values everything seems to work.

Originally posted by @questionteller in #270

Additional info: Using the array schema type for the nested schemas leads to the same issue.

Describe the bug
As I would like to use vue-tel-input (which does its own validation and fire a callback when validation is done, I wanted to set the meta to validated and valid to true but validation will still run

To Reproduce
in a control, even with following set, the validation will still be executed, regardless of whether I set valid is true / false

<template>
    <input
      @input="update($event.target.value)"
</template>

<script setup>
function update(value) {
  props.validation.errorMessage = ''
  props.validation.errors = []
  props.validation.meta.valid = true
  props.validation.meta.validated = true
  emit('update:modelValue', value)
}
</script>

Expected behavior
Validation will not proceed when validated is true and the correct error message(s) populated to validation.errors

System Info

• FormVueLate version: 3.8.1
• plugins being used with versions: @formvuelate/plugin-vee-validate: ^3.8.1

Additional context

Now that async components are starting to be more supported in Vue through Suspense, it would be great to be able to use such components together with formvuelate (i.e. components with an async setup function).

Currently this does not seem to be supported. Let me know if you'd like me to provide an example.

Is your feature request related to a problem? Please describe.
Some libraries have a custom form element, such as QForm in Quasar and ElForm in ElementPlus.
This custom element creates certain behavior and affects its child input-fields, and also has custom attributes that you can add to it. When using these libraries it is important to use the custom form element and not a standard form tag

Describe the solution you'd like
I'd like to be able to define my own form wrapping tag. Possibly by using a special slot. Maybe something like:

<schema-form
    :schema="schema"
>
  <template slot="form">
    <q-form><slot></slot></q-form>
  </template>
</schema-form>

Describe alternatives you've considered
pass an attribute to SchemaForm to make it skip rendering of the form tag completely, and then the wrapping component can also create the form tag:

<q-form>
  <schema-form
    :schema="schema"
    :skipFormTag="true"
  />
</q-form>

JSON root type could be any primitive type like Object, Array, String, Boolean, Null and Numbers
Objects and Arrays are most common one for making forms.

Describe the solution you'd like
root Model Value should be able to handle both types Objects and Arrays.
Arrays must hold the same type and it should be possible to repeat the types.
Arrays Entries can be deleted, created and updated.
Array Types can hold any type.

Describe alternatives you've considered
Support All JSON root types.

Additional context
Add any other context or screenshots about the feature request here.

i really would like to see something like this implemented https://vueformulate.com/guide/inputs/types/group/#repeatable-groups

so basically a nested schema which can be repeated and constraints like min_items=1, max_items=10

the schema might look like this:

{
  users: {
     type: "group",
     min: 1,
     max: 0, //infinity,
     repeatable: true,
     schema: {
         name: {type:"string", label:"Name"},
         age: {type:"string", label:"Age", config:{type:"number"}},
         email: {type:"string", label:"Email"},
     }
  }
}

it even could be nested i guess:

{
  users: {
     type: "group",
     min: 1,
     max: 0, //infinity,
     repeatable: true,
     schema: {
         name: {type:"string", label:"Name"},
         age: {type:"string", label:"Age", config:{type:"number"}},
         email: {
            type: "group",
            repeatable:true,
            schema: {
               email: {type:"string", label:"Email"},
               type: {type:"select", options:["Work", "Private"]}
            }
         },
     }
  }
}

im not sure if its possible with the current architecture but would be the last missing piece to have really powerful schema forms

Describe the bug
When using locally imported components as strings, an unnecessary(?) warning is shown on the console.

To Reproduce

1. Visit: https://codesandbox.io/s/fvl-local-imports-forked-hjb31
2. View the console to see [Vue warn]: injection "fvl_injectedLocalComponents" not found."

Expected behavior

• Warning should be suppressed?

System Info

• FormVueLate version: 3.7.1

Is your feature request related to a problem? Please describe.
When using the approach of touching each field on blur (and not showing the validation.errorMessage before the field is touched - as per the last example here), the current experience is not so great if you were to submit the form without touching all the fields first. The submit event will be cancelled, but still no validation messages will be displayed.

Describe the solution you'd like
Maybe an optional configuration property to forcibly touch all fields upon submit. This would then ensure that all validations are triggered and errors displayed, even when the user did not touch all the fields yet.

Another option would be exposing a property describing if the form is "submittable" (i.e. all validations are passed). That would for example allow us to disable the Submit button whenever the form state isn't valid.

Describe alternatives you've considered
Haven't found any other good solutions to this yet.

Additional context
In my case, I'm using VeeValidatePlugin.

Sorry if this is not the best place to report this bug

Describe the bug
Codesandbox examples don't work

To Reproduce
Visit https://formvuelate.js.org/examples/

Expected behavior
A working example

System Info
Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
at t.getExperimentUserId (https://codesandbox.io/static/js/default~app~embed.03c35e4cd.chunk.js:173:1102)
at new e (https://codesandbox.io/static/js/common.f54fc30db.chunk.js:1:4078)
at t.initializeExperimentStore (https://codesandbox.io/static/js/common.f54fc30db.chunk.js:1:4954)
at Module../src/embed/index.js (https://codesandbox.io/static/js/embed.d6aaab169.js:97:86009)
at a (https://codesandbox.io/static/js/embed.d6aaab169.js:1:577)
at Object.8 (https://codesandbox.io/static/js/embed.d6aaab169.js:97:86747)
at a (https://codesandbox.io/static/js/embed.d6aaab169.js:1:577)
at n (https://codesandbox.io/static/js/embed.d6aaab169.js:1:430)
at https://codesandbox.io/static/js/embed.d6aaab169.js:1:6830
at https://codesandbox.io/static/js/embed.d6aaab169.js:1:6834

Additional context
Using Chromium Version 92.0.4515.131 (Official Build, ungoogled-chromium) (x86_64)

Hi there, I'm using Vite and Vue3 written under Composition API style. (and Chrome as browser)

I'm facing a problem with adding new object or array in current schema.
For example, the demo page
https://codesandbox.io/s/fvl-playground-3x-ojbt9?from-embed
or
https://codesandbox.io/s/fvl-useschemaform-3x-w7i2f?from-embed

When you trying to add something into object or array into schema, Vue tells "inject() can only be used inside set()...".

My understanding is the schema is ref/reactive and there should be no problem.

I'm reading the guide page and cannot solve this issue so far, so please let me know if there's proper way to do it.

Best

In #198 if the condition is false the default behavior is that the value path is removed from the model as well. It seems that the vee-validate validation not follows this and the errors remains there.

Example:
https://codesandbox.io/s/fvlvee-validate-form-error-handling-5m4rt?file=/src/App.vue

Steps:

1. select A
2. select C
3. write something in 'c field'
4. delete it
5. select D

Problem:
The validation error remains there.

The custom label feature in the vee-validate plugin appears to have stopped working.

System Info

• FormVueLate version: 3.5.0
• plugins being used with versions: vee-validate 3.4.0

Describe the bug
Locally imported components does not work as expected. When declaring the component property as a string, nothing is being rendered in the browser.

I came across the discussion at issue #144. The included Codesandbox link works as expected. But if you upgrade formvuelate to the latest version the same thing happens.

Expected behavior
When importing components locally and declaring the component property as a string, I'm expecting it to be rendered.

System Info

• FormVueLate version: 3.6.1

Additional context
Here is a Codesandbox link illustrating the issue: https://codesandbox.io/s/fvl-local-imports-forked-2ez5q

Is your feature request related to a problem? Please describe.

FormVueLate lets you group form fields easily using SchemaForm as show in the playground example: https://formvuelate.js.org/#playground

When you enter a work address and work phone number the resulting JSON looks like this:

{
  "firstName": "Uwe",
  [...]
  "work": {
    "address": "Lindenstr. 23",
    "phone": "12345",
  }
}

This works nicely for grouping many fields that belong to one combined entry.

But how would you specify a grouping of fields that allow an arbitrary number of entries.

An example of this would be a form where need to enter all the members of your family:

• Family members:
• [Button: Add another family member to list]
  • Select role: [ parent v ] // you can select from "parent", "grand-parent", "child", "grand-child"
  • First name: ___________________
  • Last name: ___________________
  • Address: _____________________
  • [ Button: Remove this family member from list|

The two buttons would allow users to create new entries

The resulting JSON would look like this:

{
  "familyMembers": [
    {
      "role": "parent",
      "firstName": "John",
      "lastName": "Doe"
    },
    { 
      "role": "child",
      "firstName": "Jill",
      "lastName": "Doe"
    }
  ]
}

Describe the solution you'd like

I don't know if this supported by FormVueLate at all.

If this is easily done I would appreciate a short code example in the documentation. If it is not supported or very hard to do I would also appreciate to know.

Describe alternatives you've considered

I could not find anything in the documentation about this kind of use-case.

I tried to find examples on the web, but Google did not turn up something useful so far.

Many examples on this page aren't rendering https://formvuelate.js.org/examples/#conditional-fields-with-schema

Hi

Not sure if this is a bug or just a limitation of the library, but when I try to place multiple adjacent sub-schemas, it seems to go into a recursive tailspin and end up with a "RangeError Maximum call stack size exceeded" error.

Here's an example:

https://codesandbox.io/s/fvl-adjacent-sub-forms-forked-rzek8?file=/src/App.vue

const SCHEMA = {
  firstName: {
    component: FormText,
    label: "First Name",
  },
  work: {
    component: SchemaForm,
    schema: {
      address: {
        component: FormText,
        label: "Work address",
      },
      phone: {
        component: FormText,
        label: "Work phone",
      },
    },
  },
  details: {
    component: SchemaForm,
    schema: {
      position: {
        component: FormText,
        label: "Work position",
      },
      employees: {
        component: FormSelect,
        label: "Number of employees",
        options: ["1", "2", "3", "4+"],
      },
    },
  },
};

Hello,

How can I use Vuelidate with Formvuelatte?
Can you add some doc about this?

Regards

Hey there I want to generate forms throught schema and I wanted to know
how to use this package in nuxt js and vue 2 I have read through docs but did not find anything
so it would be great to get help from here

Describe the bug

The config property does nothing. Example:

{
  "email": {
    "component": "FormText",
    "label": "Your email",
    "required": true,
    "config": {
      "type": "email"
    }
  },
}

To Reproduce

1. Go to the playground: https://codesandbox.io/s/fvl-playground-3x-ojbt9?from-embed=&file=/src/App.vue:2989-2995
2. Open devtools
3. Inspect the email field
4. Notice that the type is wrong on the DOM element.

Expected behavior

The type should be set to email on the DOM element.

System Info

• FormVueLate version: v3.2.2
• plugins being used with versions: none

When using a component that emits a model value with an array of strings (multi-select), the following error is thrown:

[Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected String, Number, got Array 
  at <WithFieldWrapper key=0 component= {name: "withFieldWrapper", props: {…}, __props: Array(2), __emits: null, setup: ƒ, …} label="Brands"  ... > 
  at <SchemaField key="brands" field=
...

How can I indicate that I do actually expect this to be an array?

Describe the bug
When I fill fields in an automated way, the model doesn't get updated. Only when I manually type in the text input does the data get added to the model.

Video

To Reproduce
Steps to reproduce the behavior:

1. Open the example sandbox app
2. Install the JunkFill Chrome extension to simulate the autofill.
3. While on the sandbox page, click the JunkFill extension icon.
4. Inspect the modelValue with Vue devtools and you will see that it doesn't reflect the text inputs.
5. Then type manually into the text inputs, you will then see it reflected in the modelValue

Expected behavior
I would expect the input data to show up in the model no matter how it is entered into the input, whether it be automated or manual entry.

System Info

• FormVueLate version: 2.2.1
• plugins being used with versions: none

Does this package have Typescript support or are you planning to add it?

When trying to use this in my Vue 3 app using Typescript I get the following error:

Could not find a declaration file for module 'formvuelate'. '.../node_modules/formvuelate/dist/formvuelate.common.js' 
implicitly has an 'any' type.
  Try `npm i --save-dev @types/formvuelate` if it exists or add a new declaration (.d.ts) file containing 
`declare module 'formvuelate';`Vetur(7016)

Is this new vuelidate rewritten?

Is your feature request related to a problem? Please describe.

I've encountered a situation where I need custom attributes on the <form> element. More specifically novalidate in order to disable the browsers validation (and its popups).

Describe the solution you'd like

Something like this would be nice:

<SchemaForm
  :schema-form-attributes="{ foo: 'bar' }"
  :schema="mySchema"
/>

Describe alternatives you've considered

Maybe a slot ?

<SchemaForm
  :schema="mySchema"
>
  <template #formWrapper="attrs">
    <form v-bind="attrs" novalidate>
      <slot />
    </form>
  </template>
</SchemaForm>

Or a custom defined element that is used for :as internally ?

<SchemaForm
  schema-form-element="MyCustomForm"
  :schema="mySchema"
/>

<MyCustomForm>
    <form v-bind="$attrs" novalidate>
      <slot />
    </form>
</MyCustomForm>

So, in this case

...
something: {
  component: SchemaForm,
  schema: {
    ...
    condition: () => false
  }
}
...

A div.schema-form always be rendered with empty content. It's not break anything but when you add some css style for example padding it affects the layout.

It can be easily solve with some css in the internal elements but maybe it's totally unnecessary to render that empty div.schema-form and can be ommited.

Hi
In my app, clicking "confirm" button will pop up a modal to let the customer confirm whether the input is correct. Then click "submit" in modal to submit the form.
I want to trigger validatation manually when user click "confirm" button, how can I do it?

https://formvuelate.js.org/guide/vuelidate.html#installation I read the document and didn't got the answer.

Based on #141
Reported by @D3m1urg0

You can reproduce it directly in the codesandbox i provided: (but i get the same result also on my local project)
if you insert any value inside the textfields they will loose the focus at each input event (you can just type one letter then you need to select the field again)

I tested it also commenting the plugins options and everything works as intended then it should be some kind of regression from the last fix.

It is very common that input has a conditional relationship to another field.

Problem: Currently it is very tedious to create large forms which have a tree form (not linear like a wizard form)

Idea: To have a condition property on the schema object wich will be executed when the form model changes. Schema will be a computed property of the form model