What about nested forms ?

[FlorentinBurgeat]

Hi,

So I have a very long form to create and i want to break it down into multiple parts like that:

<my-form>
    <form-part1 />
    <form-part2/>
    ...
    <button type="submit"> Submit </button>
</my-form>

Should I set my <vue-form> tag only in MyForm Component and pass the state to each child (and maybe its inner childs) ? Or should I create nested <vue-form> with nested formstates ?

Thx for your answer!

[wtho]

Native html-forms should not be nested, as stated in the html5 spec:

4.10.3. The form element Content model: Flow content, but with no

element descendants.

As vue-form is based on forms, they should also not be nested when using the form-tag.

You can change the tag of from form to e. g. div and put several vue-forms inside a native <form>:

<form>
  <vue-form tag="div"> ... </vue-form>
  <vue-form tag="div"> ... </vue-form>
</form>

Should I set my tag only in MyForm Component and pass the state to each child (and maybe its inner childs) ?

I have not tried it, but I am quite sure the different vue-forms will change the formState to what they like without respecting what the other forms do, it might be better to handle the states seperately.

Or should I create nested with nested formstates ?

Seems the better approach, but probably you just have to see what works best for you. When using this approach, there might have problems with $submitted though.