fix(core): remove mount validation on touch
This PR closes #689
A few considerations:
-
When should we remove the errors? My proposal would be to remove each field individually when gets touched and the form as soon as a field is touched. As long as a field is not touched, it keeps the mount errors.
-
Should we be able to submit a form with onMount errors? I'd say no, but currently if
state.submissionAttempts === 0 && !isTouchedwe havecanSubmit: trueAdding&& !hasOnMountErroralso aims to fix the unwanted behavior described in #723 -
We might want to explicitly explain in the docs how we intend onMount to behave I'm happy to improve the docs in this PR if we decide to go through with the proposed behavior
-
Bonus The amount of eslint disable on form.errorsMap makes me wonder if we should consider it as optional in first place, but that's maybe another topic.
☁️ Nx Cloud Report
CI is running/has finished running commands for commit f25c26bbad0f102a979d4202b996280f0847c050. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.
📂 See all runs for this CI Pipeline Execution
✅ Successfully ran 2 targets
Sent with 💌 from NxCloud.
This really tripped our team up. We expected that if we specify onMount + onChange validators then when the field is "changed" it would clear the onMount error. I think clearing the mount error on change / blur is probably a reasonable way to address it.
More templates
- @tanstack/form-example-angular-array
- @tanstack/form-example-angular-simple
- @tanstack/form-example-angular-valibot
- @tanstack/form-example-angular-yup
- @tanstack/form-example-angular-zod
- @tanstack/form-example-lit-simple
- @tanstack/form-example-lit-ui-libraries
- @tanstack/form-example-react-array
- @tanstack/field-errors-from-form-validators
- @tanstack/form-example-react-next-server-actions
- @tanstack/form-example-react-query-integration
- @tanstack/form-example-react-simple
- @tanstack/form-example-react-tanstack-start
- @tanstack/form-example-react-ui-libraries
- @tanstack/form-example-react-valibot
- @tanstack/form-example-react-yup
- @tanstack/form-example-solid-array
- @tanstack/form-example-react-zod
- @tanstack/form-example-solid-valibot
- @tanstack/form-example-solid-yup
- @tanstack/form-example-solid-zod
- @tanstack/form-example-vue-simple
- @tanstack/form-example-vue-array
- @tanstack/form-example-vue-valibot
- @tanstack/form-example-vue-yup
- @tanstack/form-example-solid-simple
- @tanstack/form-example-vue-zod
@tanstack/angular-form
pnpm add https://pkg.pr.new/@tanstack/angular-form@726
@tanstack/form-core
pnpm add https://pkg.pr.new/@tanstack/form-core@726
@tanstack/lit-form
pnpm add https://pkg.pr.new/@tanstack/lit-form@726
@tanstack/react-form
pnpm add https://pkg.pr.new/@tanstack/react-form@726
@tanstack/solid-form
pnpm add https://pkg.pr.new/@tanstack/solid-form@726
@tanstack/valibot-form-adapter
pnpm add https://pkg.pr.new/@tanstack/valibot-form-adapter@726
@tanstack/vue-form
pnpm add https://pkg.pr.new/@tanstack/vue-form@726
@tanstack/yup-form-adapter
pnpm add https://pkg.pr.new/@tanstack/yup-form-adapter@726
@tanstack/zod-form-adapter
pnpm add https://pkg.pr.new/@tanstack/zod-form-adapter@726
commit: f25c26b
Codecov Report
All modified and coverable lines are covered by tests :white_check_mark:
Project coverage is 88.50%. Comparing base (
5473bb8) to head (f25c26b). Report is 154 commits behind head on main.
Additional details and impacted files
@@ Coverage Diff @@
## main #726 +/- ##
==========================================
- Coverage 91.55% 88.50% -3.05%
==========================================
Files 21 26 +5
Lines 900 1079 +179
Branches 206 267 +61
==========================================
+ Hits 824 955 +131
- Misses 71 115 +44
- Partials 5 9 +4
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.