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

Form: v-slot="$form" still doesn't handle nested array of objects properly #7301

Open
2 of 4 tasks
Matheusfrej opened this issue Feb 22, 2025 · 0 comments
Open
2 of 4 tasks
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@Matheusfrej
Copy link

Describe the bug

Continuation to #6924

After the fix in version 4.3.0-rc.1, the form state identifies arrays, like in the $form state below:
Data in form: { "valid": true, "username": { "value": "", "touched": false, "dirty": false, "pristine": true, "valid": true, "invalid": false, "error": null, "errors": [] }, "emails": [ { "title": { "value": "123", "touched": false, "dirty": false, "pristine": true, "valid": true, "invalid": false, "error": null, "errors": [] }, "address": { "value": "", "touched": false, "dirty": false, "pristine": true, "valid": true, "invalid": false, "error": null, "errors": [] } }, { "title": { "value": "", "touched": false, "dirty": false, "pristine": true, "valid": true, "invalid": false, "error": null, "errors": [] }, "address": { "value": "", "touched": false, "dirty": false, "pristine": true, "valid": true, "invalid": false, "error": null, "errors": [] } } ] }

However, the validation for array fields does not work as expected:

  • Invalid fields in the array do not display visual feedback like normal fields do.
  • Inputs inside the array do not retain their initial values when defined.
  • Removing an object from the array does not update the form state correctly; the removed object remains in the form state.

If there is an alternative way to achieve this, any guidence would be greatly appreciated.
Best regards!

Pull Request Link

No response

Reason for not contributing a PR

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/pgshym-th2dcymw?file=src%2FApp.vue

Environment

Stackblitz

Vue version

3.5.13

PrimeVue version

4.3.0-rc.1

Node version

No response

Browser(s)

Chrome 122.0

Steps to reproduce the behavior

  1. Delete Objects from the Array
  • Click the "Delete" button on any email field to remove it.
  • Check if the form state reflects the removal properly.
  1. Submit the Form
  • Fill in some fields while leaving others blank.
  • Click the "Submit" button and observe the validation results in the console or UI.

Expected behavior

  • The validation should trigger correctly for array fields.
  • The form state should accurately reflect added and removed objects.
  • Inputs should retain initial values upon creation.
  • Visual validation feedback should work consistently across all fields.
@Matheusfrej Matheusfrej added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Feb 22, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

1 participant