Suggestions for conditionally hiding fields

[ozzywadd]

Hi All 👋

I would like some help/suggestions on the best ways of conditionally hiding fields.

In an ideal world, I'd like to generate forms based on a schema that contains all information about the inputs including initial values, input type, dynamic component and validation logic preferably using Yup. I also like the idea of using the composition API for this.

I'm currently preventing fields from rendering by having a {hidden: boolean} flag on the input schema and then utilising v-if on the dynamic component.

The issue I run into is that the validation errors on a hidden field are still present even after I update the validationSchema that is passed to useForm().

Any help will be much appreciated!

[apeling]

We are doing something similar. Our useForm implements a reactive schema.

Initially I was doing conditionals with v-if. I ended up having to redo that with v-show. Our forms can be reset back to initial data. As such fields that depend on another field (I call the parent field a "triggerField") value to appear would occasionally hit DOM race conditions on reset. Meaning the triggerField value could reset in such a way to cause the conditional fields to go from un-rendered to rendered. In many cases this would result in the triggerField value being correctly reset, but the conditional fields relying on it not getting their correct reset values. In earlier versions of veeValidate those conditional fields would occasionally not correctly get their validations reattached on reset. This may have since been addressed, but I have not gone back and attempted the v-if method with newer builds.

Our form layout is loaded from an api call. Part of our parsing logic creates objects to track triggerFields, requiredFields, and visibleFields for a given form layout.

The logic also creates render objects for each field which is v-bind to a <component>. When rendering our dynamic components they v-show by checking against the visibleFields object. If the field is marked as a triggerField a changeHandler is also added to that component: @update:modelValue="changeHandler(field, name)"

That changeHandler, when hit, runs through the options from the given triggerField and value combination to check against its conditionals on whether to add / remove / set options (for the dependent conditional fields) on requiredFields, visibleFields, and the reactive yup validation schema .

Some of the skeleton / ideas are in a sandbox that I created for another discussion: Vee-validate Array field Validation
(the actual implementation logic of the triggerFields / changeHandler is not in that sandbox)

See the discussion for more information on what some of the sandbox bits are intended to do.

[apeling]

Without an example it is a lil hard to make other recommendations. However, I was negligent to not mention that since VeeValidate 4.4.4 schema is king. So depending on your implementation you may also opt to use the .when() of yup to prevent non-applicable fields from being validated.

See this example.