resetForm does not properly reset array with useFieldArray & useField

[DrunkenToast]

What happened?

When using custom inputs (useField) in a repeatable form (useFieldArray) and altering the state with resetForm, the array does not properly reset causing empty objects to appear in the array.

The issue does not appear when not using useField and working with v-model with field.value.property from useFieldArray. However, this makes it unable to use meta etc. from useField.

Related issue I've found: #3934

Before I opened this issue I had also opened this discussion:
#4516

Reproduction steps

1. Add fields by adding items to a store
2. Remove fields by popping from a store
3. Fields arent properly removed and the state is out of sync
   • You can only remove one item, the last field becomes an empty object
   • The form simply watches the store state and calls a resetForm()

Workaround:
Follow NOTE instruction in src/components/ItemFields.vue
(Replace custom input with normal input + v-model)

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

No response

Demo link

https://github.com/DrunkenToast/vee-validate-fieldarray-usefield

Code of Conduct

• I agree to follow this project's Code of Conduct

[logaretm]

This is because resetForm uses a merge strategy when it overrides the field values. You could try using force option and it should forcibly reset the values.

resetForm({ values: val }, { force: true })

Consider using useForm inside your store because having two source of truths will always be confusing.

[DrunkenToast]

Hi thanks for the reply. I was convinced I had tried force before as it is documented in the docs but it didn't seem to do anything, however I now found out that our package version didn't have this feature yet (4.9).

As for the store, it was mostly for the reproducable.
In our project we watch a prop in a tabpage with a form, switching tabs switches the props around so we watch that, submitting the form calls the API and prop updates as well. I don't know if you would still recommend to use the useForm inside a store in that situation.

[logaretm]

While it works, I would be careful with using useForm inside Pinia stores as lifecycle hooks only execute against the component that first initialized the store, which may cause unwanted behavior sometimes.

But generally, I wouldn't use stores for forms anyway as I believe form state is ephemeral. However, I would consider form-centric apps an exception, an example that comes to mind is TypeForm. But it is definitely up to you and what works best for your team.