Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

isFieldDirty on array of object field #4575

Closed
2 of 5 tasks
faizaaulia opened this issue Nov 30, 2023 · 4 comments · Fixed by #4594
Closed
2 of 5 tasks

isFieldDirty on array of object field #4575

faizaaulia opened this issue Nov 30, 2023 · 4 comments · Fixed by #4594
Labels
✨ enhancement a "nice to have" feature 🛳 In PR This issue is being addressed in a PR

Comments

@faizaaulia
Copy link

faizaaulia commented Nov 30, 2023

What happened?

I'm using field array, and I want to check if a specific field is dirty using isFieldDirty. It worked properly on basic field, but it's not as I expected when it used on array field.
Here I forked the field array example stackblitz and modify it to use isFieldDirty.
So, when I change a field that part of the array field, the dirty flag from the meta is true (work as expected). But the dirty flag from isFieldDirty('users') resulted as false, isn't should be true as well? Because the field users value has been changed and the dirty flag from meta is true tho
But, when I check the field array to the specific index and field like isFieldDirty('users[0].name'), it resulted true. Why when the path is refer to the field array name is not resulted as expected, compared with specific index path?

Or may be is there a function or prop that return the dirty field? For example
const { dirtyFields } = useForm(), that will be return the dirty field's name like {'users'}

Also i got question for the similar issue with this one on #3448, related to initialValue that affected from conditional rendering, so the dirty flag is not accurate anymore

Reproduction steps

Stackblitz link: https://stackblitz.com/edit/vee-validate-v4-array-fields-n33ulm?file=src%2FApp.vue
Step:

  1. change user data
  2. expected: isFieldDirty('users') would be true, actual: it is still false, but the meta.dirty of the form is true

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://stackblitz.com/edit/vee-validate-v4-array-fields-n33ulm?file=src%2FApp.vue

Code of Conduct

@Acetyld
Copy link

Acetyld commented Dec 5, 2023

A const { dirtyFields } = useForm() would be lovely!

@logaretm
Copy link
Owner

logaretm commented Dec 14, 2023

This is a technicality issue, users is not a field it is a path so it doesn't have an associated meta with it. But I think it is a worthwhile enhancement to resolve all nested paths under there and compute their status.

This is a quick win, so I will work on it.

@Acetyld that's a good suggestion but more complex because of the nature of paths vs fields, you can find a discussion on that here #4593

@faizaaulia
Copy link
Author

This is a technicality issue, users is not a field it is a path so it doesn't have an associated meta with it. But I think it is a worthwhile enhancement to resolve all nested paths under there and compute their status.

This is a quick win, so I will work on it.

@Acetyld that's a good suggestion but more complex because of the nature of paths vs fields, you can find a discussion on that here #4593

ooh ok, i got it. thank you

@faizaaulia
Copy link
Author

faizaaulia commented Dec 14, 2023

One more question @logaretm. Let say, I have 1 more field namely user_count that will be affecting the number of users using v-if confitional rendering. The initial value of user_count is 2, therefor the length of users will be 2 as well. Then i change the user_count to 1. The dirty flag from isFieldDirty('users[1].name') will be true, which is expected. But when I change back the user_count to 2 and fill the user data same as the initial value, why is the dirty flag still true? Like the users[1].name has lost reference to the initial values when first render

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨ enhancement a "nice to have" feature 🛳 In PR This issue is being addressed in a PR
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants