form icon indicating copy to clipboard operation
form copied to clipboard

fix(core): remove mount validation on touch

Open Balastrong opened this issue 1 year ago • 1 comments

This PR closes #689

A few considerations:

  1. 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.

  2. Should we be able to submit a form with onMount errors? I'd say no, but currently if state.submissionAttempts === 0 && !isTouched we have canSubmit: true Adding && !hasOnMountError also aims to fix the unwanted behavior described in #723

  3. 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

  4. 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.

Balastrong avatar May 30 '24 19:05 Balastrong

☁️ 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.

nx-cloud[bot] avatar May 30 '24 19:05 nx-cloud[bot]

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.

brandonryan avatar Oct 29 '24 17:10 brandonryan

Open in Stackblitz

More templates

@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

pkg-pr-new[bot] avatar Nov 04 '24 19:11 pkg-pr-new[bot]

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.

codecov[bot] avatar Nov 04 '24 20:11 codecov[bot]