☁️ Nx Cloud Report

CI is running/has finished running commands for commit 8aad2b1d9d42af4b0d0997af571a817679cbbaee. 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.

Sep 05 '24 15:09 nx-cloud[bot]

Open in Stackblitz

More templates

@tanstack/angular-form

npm i https://pkg.pr.new/@tanstack/angular-form@940

@tanstack/form-core

npm i https://pkg.pr.new/@tanstack/form-core@940

@tanstack/lit-form

npm i https://pkg.pr.new/@tanstack/lit-form@940

@tanstack/react-form

npm i https://pkg.pr.new/@tanstack/react-form@940

@tanstack/solid-form

npm i https://pkg.pr.new/@tanstack/solid-form@940

@tanstack/valibot-form-adapter

npm i https://pkg.pr.new/@tanstack/valibot-form-adapter@940

@tanstack/vue-form

npm i https://pkg.pr.new/@tanstack/vue-form@940

@tanstack/yup-form-adapter

npm i https://pkg.pr.new/@tanstack/yup-form-adapter@940

@tanstack/zod-form-adapter

npm i https://pkg.pr.new/@tanstack/zod-form-adapter@940

commit: 8aad2b1

Sep 05 '24 15:09 pkg-pr-new[bot]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 86.75%. Comparing base (ab9dd76) to head (8aad2b1). Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #940      +/-   ##
==========================================
- Coverage   86.79%   86.75%   -0.05%     
==========================================
  Files          29       29              
  Lines        1159     1155       -4     
  Branches      298      298              
==========================================
- Hits         1006     1002       -4     
  Misses        140      140              
  Partials       13       13

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

Sep 05 '24 15:09 codecov[bot]

@crutchcorn I implemented the changes as requested and added some more tests, could you please re-check?

Nov 26 '24 13:11 Pascalmh

@Balastrong the isBlurred state of the fields in the form are kept now (removed the batch part and updated the test) -

FYI: you'll need to use submissionAttempts instead of isSubmitted to display the errors as isSubmitted is set to false again inside the handleSubmit-function:

// FormApi.ts

handleSubmit = async () => {
    this.store.setState((old) => ({
      ...old,
      // Submission attempts mark the form as not submitted
      isSubmitted: false,
      // Count submission attempts
      submissionAttempts: old.submissionAttempts + 1,
    }))
    
    // …
}

Example Code (JSX):

Only shows errors once the field is blurred or the form has been attempted to submit at least once.

{(field.form.state.submissionAttempts || field.state.meta.isBlurred) && field.state.meta.errors.length ? (
  <em>{field.state.meta.errors.join(',')}</em>
) : null}

Demo:

https://stackblitz.com/edit/wyqmwdxk?file=src%2Findex.tsx

Dec 17 '24 07:12 Pascalmh

fix: only set fields to isBlurred after field blur or form submit

☁️ Nx Cloud Report

Codecov Report

Example Code (JSX):

Demo: