[v4] Suggestions / help Array fields

[apeling]

I apologize in advance for the lengthy explanation below.

I've been trying to implement array fields in my form. I've run into several issues / headaches. The biggest is how to properly handle initial values and form reset. I've created a sandbox where I have duplicated most of my application's form logic that handles resetting array fields.

(see notes on the sandbox near the bottom of this post)
https://codesandbox.io/s/vee-validate-array-field-validation-wike2

I confess to being a relatively new to Vue (this project is my first experience and I have only been using it for about 3 months). So there are probably (definitely?) some poor practices being used on my part.

Right now to get reset and add/remove working with Clusterfield (what I call my custom field type that consists of a block of array fields) I tap into the model exposed by useField. With that I am able to manhandle / coordinate the visual array and the data contained within. I have had to use template refs to directly call each instance of cluster when doing a reset. This also lead me to use cloneDeep when doing resets to prevent the "source of truth"(original data loaded from an api) being changed.

HALP! / My Application's bug

Just to make it crystal clear, the codesandbox example works exactly as I want my application to function. I mainly started this sandbox to try and recreate a bug I see in my project where array fields are not validating properly. However even after nearly mirroring all the various component / nested components / logic from my project into this sandbox I can't recreate the issue.

In my project once the array fields are available the validation only appears to fire once and does not seem to be passing the correct / newest field model values to the yup schema. After that first validation event fires for the array field, no matter what value is in the input field it never passes validation. If I click submit I can see the correct data has been populated in useForm values model. It does not matter if the field has initial data or not. I've also tried retooling everything to avoid useField in ClusterField and pass in initial "amount of clusters to display" as a prop. That had the same issue. So I am at a complete loss as to what is going on.

As you can imagine this is the worst kind of issue to try and debug as I cannot recreate the issue in the codesandbox using identical code (the only difference that I can note is the use of Vue router / router-view in my project).

I have tried so many different permutations in my project and the codesandbox. No matter what I tried I cannot fix / find the issue in my application OR recreate the same issue in the codecodebox.

I'm looking for any ideas as why my issue above might be occurring (or ways I could better debug on my end) and if there are suggestions on a better way to handle array fields with initial values and form resets.

Notes on the sandbox

• This was an attempt to recreate my application's component structure / nesting / data as closely as possible. To that end I added setTimeouts to simulate async calls.
• The real application does several things in its async onMounted method:
  • Fetches the form data from an API.
  • After that a value from the data is used to make another API call which fetches a form layout/structure configuration the data type
  • The loaded structure and form data are run through some parsing / hydration methods to get them ready for use in the form.
    • Those hydration methods are not in the codesandbox. The resulting output from those methods is in the "theData.js" file.
  • The hydration methods are also used to generate a yup schema
    • Once again the result is in "theData.js"
• Components
  • AnyField is modification (bastardization?) of the "Build a Form Generator"
  • ClusterField custom field to handle a field / data type that is made up of array fields
  • FieldWrapper is a simple wrapper to add a label, error message, help text, and bootstrap CSS.
  • DynamicFields will render an array fields based on their render properties.
    • Also for one tier of nesting in the event one of the fields is a ClusterField type.
• Methods / objects from the root form are injected into DynamicFields as this makes getting at those things easier in the event of a nested DynamicFields.
  • I've removed / watered down the items exposed in the provide as they are not relevant for this sandbox example
• I'm not sure if this usage of useField and array fields was intended / supported. However, if you attempt to implement useField without have passed any kind of data to the initial values (via useForm) of that field's name there is a runtime error when you click "Add [Field Label Here]".
  • Rename the data keys in theData.js to see.
  • Error: Cannot use 'in' operator to search for '0' in undefined

[logaretm]

Thanks for posting this, I don't get a lot of feedback on array fields support. In any case, I don't really have a guess into why it would pass the wrong values to the yup schema.

Error: Cannot use 'in' operator to search for '0' in undefined

This was just fixed in 79d3779

You can find this change published in 4.5.0-alpha.0, maybe give it a try?

[apeling]

@logaretm Thank you for the response. I set a default of empty array in my hydration logic so that issue was easy enough to get around. Today I did finally figure out what is / was causing my validation issue and I'm pretty sure I have to turn in my developer badge now.

What I should have been doing in my application (and what I did in my sandbox):
array().of(object().shape(subValidation).strict())

The bad actor my eyes and brain refused to see in my project code:
array().of(object().shape(subValidation)).strict()

That lil parenthesis shift was causing the yup.date() AND ONLY the yup.date() to throw type errors immediately in my array fields.

I'd still love to hear other people's thoughts / your own on how to best handle dealing with resets on array fields (and if my ham-fisted attempt is the wrong way entirely to go about it) and the tug of war between the v-for driving the cluster display of fields and the dataModel. This is why I ended up with the "make a copy of the data -> modify the field iterator -> put the data back" logic in the add / delete / reset methods.