Skip to content

fix(Form): improve nested form validation handling#5024

Merged
benjamincanac merged 2 commits intov4from
refactor/nested-forms
Sep 22, 2025
Merged

fix(Form): improve nested form validation handling#5024
benjamincanac merged 2 commits intov4from
refactor/nested-forms

Conversation

@romhml
Copy link
Member

@romhml romhml commented Sep 21, 2025

🔗 Linked issue

Resolves #5013

❓ Type of change

  • 📖 Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • 👌 Enhancement (improving an existing functionality)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Refactors the nested form logic inside the form component and fixes an issue where using FormField without an input would not display errors.

📝 Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

@github-actions github-actions bot added the v4 #4488 label Sep 21, 2025
@pkg-pr-new
Copy link

pkg-pr-new bot commented Sep 21, 2025

npm i https://pkg.pr.new/@nuxt/ui@5024

commit: af3ee88

@benjamincanac benjamincanac changed the title refactor(Form): nested form handling fix(Form): improve nested form validation handling Sep 22, 2025
@romhml romhml force-pushed the refactor/nested-forms branch from 0fc2386 to af3ee88 Compare September 22, 2025 07:59
Comment on lines +432 to +433
if (matchesTarget(name, form.name)) form.api.clear()
nestedErrors.push(...getFormErrors(form as any))
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
if (matchesTarget(name, form.name)) form.api.clear()
nestedErrors.push(...getFormErrors(form as any))
if (matchesTarget(name, form.name)) {
form.api.clear()
} else {
nestedErrors.push(...getFormErrors(form as any))
}

The clear method collects errors from all nested forms regardless of whether they were actually cleared, potentially reintroducing errors that should have been cleared.

View Details

Analysis

Inconsistent error collection in Form.clear() method

What fails: Form.clear() collects errors from ALL nested forms instead of only non-cleared forms, inconsistent with setErrors() pattern

How to reproduce:

  1. Create parent form with multiple nested forms containing errors
  2. Call parentForm.clear('specificFormName') to clear only one nested form
  3. Observe that getFormErrors() is called on all forms, including the just-cleared form

Result: Unnecessary getFormErrors() calls on cleared forms that return empty arrays

Expected: Only collect errors from forms that were NOT cleared, matching the pattern used in setErrors() method where only targeted forms are processed

Reference: The setErrors() method in the same file only collects errors from matched forms within the conditional block, but clear() collects from all forms unconditionally

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The method used here collects the latest errors, so it excludes errors that have been cleared.

@benjamincanac benjamincanac merged commit 77a554e into v4 Sep 22, 2025
16 checks passed
@benjamincanac benjamincanac deleted the refactor/nested-forms branch September 22, 2025 08:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

v4 #4488

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Empty FormField does not render error messages

2 participants