vee-validate icon indicating copy to clipboard operation
vee-validate copied to clipboard

Error message doesn't show when array is empty

Open JacobEgholm opened this issue 9 months ago • 0 comments

What happened?

I am using vee-validate (composition api) with Zod to create validation for an array, which requires at least one row. When I delete the last row, then I would expect an errorMessage to show up, but it doesn't show up.

Reproduction steps

  1. Open this code sandbox: https://codesandbox.io/p/devbox/billowing-tdd-cy85lz
  2. Click "Delete"-button in browser preview window to remove array item.
  3. I expect the errorMessage "At least one item is required" to show up under my list, but it doesn't.

I am writing out "errors" from useForm just for debugging purpose, and as you can see the error "At least one item is required" does actually exist. But the error path is incorrect. It looks like this

{ "mySettings": "At least one item is required" }

but I would expect it to be:

{ "mySettings.myArray": "At least one item is required" }

Am I doing something wrong or is it a bug in vee-validate?

Helpfull note In Form.vue I use setFieldValue to update form data. The reason for this is because the user should be able to open the form and edit values (which I sync to pinia store) and then navigate away from the form and last navigate back to the form without loosing data. If I remove setFieldValue, then the errorMessage "At least one item is required" is shown correctly. So I believe the issue is related to setFieldValue. ...

Version

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

What browsers are you seeing the problem on?

  • [ ] Firefox
  • [x] Chrome
  • [ ] Safari
  • [ ] Microsoft Edge

Relevant log output


Demo link

https://codesandbox.io/p/devbox/billowing-tdd-cy85lz

Code of Conduct

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

JacobEgholm avatar Jan 28 '25 13:01 JacobEgholm