Lazy component (preserve validation)

[aresofficial]

Hi there,

I have a lazy component (accordion). When user collapses it - I do not render the content inside it (v-if).
All components of myType have validation: 'required'.

The issue is when I collapse my Accordion - the form state becomes valid = true.

Unfortunately I can not use v-show for my purposes because the content of this accordion can be massive + there can be multiple accordions in the same form (up to 100).

Is there any way to preserve validation state? Or could you recommend some workaround?

Many thanks for your answer.

Code example

<FormKit type="form" :config="{ validationVisibility: 'live' }" />
  <Accordion // here is my custom FormKit component as well
    :lazy="true"
    header="Click here to expand"
  >
    <FormKit
      :preserve="true"
      :type="myType" // all components inside are with validation: 'required'
      name="accordionData"
    />
  </Accordion>
</FormKit>

[fenilli]

I don't think there is a way to easily keep validations like this, as when you remove a node, it is not there anymore.

One way I could think you do to something similar to this, is to have to accordion with a group that keeps the validation and values, so validations state would be from the group not the fields.

[aresofficial]

This approach only works when my accordion is initially loaded as non-lazy

[aresofficial]

I found only 1 way to do it is to have extra field that will store isValid on accordion collapsing.

<FormKit v-model="data._isValid" validation="accepted" type="hidden" name="_isValid" />