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

No way to cleanly update the initial value of a field #4564

Closed
1 of 5 tasks
olegshibaev opened this issue Nov 27, 2023 · 1 comment
Closed
1 of 5 tasks

No way to cleanly update the initial value of a field #4564

olegshibaev opened this issue Nov 27, 2023 · 1 comment

Comments

@olegshibaev
Copy link

olegshibaev commented Nov 27, 2023

What happened?

As of v4.12.0 there's no way to update the initial value of a single field without breaking the rest of the form in some way.

The use cases for this are:

  1. Loading initial values of a part of the form from a separate api endpoint
  2. Resetting the values of a part of the form after submit when submitting is done via multiple requests

At the very least, I want to be able to do resetField('field', { value }) and have that set the initial value of the field, update the value of the field to that initial value, and have that reflected correctly in the meta.dirty flag of both the form and the field context.

Details

Before 4.12.0 there were three different ways to set the initial values of a field:

  1. resetForm
  2. resetField
  3. Reactive initialValues

All of these have different behaviors some of which seem like bugs.

resetForm

  1. When all values are passed, resets all fields to those values even if they are touched/dirty
  2. 🐛 When partial values are passed, resets all fields which were not passed to underfined https://codesandbox.io/p/sandbox/basic-example-composition-api-forked-kqwp7m?file=%2Fsrc%2FApp.vue%3A16%2C37

resetField

  1. Resets the field to the value passed even if the field is touched/dirty
  2. 🐛 Leads to the meta.dirty flag of the form being incorrect https://codesandbox.io/p/sandbox/basic-example-composition-api-forked-g42d5k?file=%2Fsrc%2FApp.vue%3A28%2C11

Reactive initialValues

  1. Only resets the fields if they are not touched
  2. Resets dirty fields
  3. Not available since 4.12.0 Type error on (form) values and handleSubmit not correct when using a computed as initial values #4402

Additionally, there's now useless code in the internal setInitialValues method that resets the values based on the touched flag of the fields, that then gets overwritten by resetForm which is the only method that callse setInitialValues.

Proposed changes

  1. Fix bug in resetForm when passing partial values or disallow passing partial values
  2. Fix bug in resetField so that it doesn't break meta.dirty of the form and field
  3. Expose setInitialValues and setFieldInitialValue to allow updating the initial values of the form without resetting the values of the field. This can have a mode option with the following option values (not sure what the default should be):
  4. keepValues - just sets the initialValues
  5. resetValues - resets all values, same behavior as resetForm
  6. resetPristineValues - resets values if they are not dirty/touched (similar behavior to setInitialValues right now, but also checking the dirty status).

Reproduction steps

No response

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

See above

Code of Conduct

@logaretm
Copy link
Owner

Thank you, these issues should be addressed in the patch release that will be tagged shortly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants