feat(form-core): add parseValueWithSchema() stateless method

[LeCarbonator]

As of tanstack form v1.4, there are two ways to use standard schemas as validators:

1. Pass directly

validators: {
  onChange: mySchema
}

2. Create a callback and import standardSchemaValidators

validators: {
  onChange: ({ value }) => {
    return standardSchemaValidators.validate(
      { value, validationSource: 'form' },
      mySchema
    );
  }
}

While more verbose, the second function allows you to combine standard schemas easily with other onChange validation a user may want on the same form / field.
There are some things to note about this:

• value is redundant, as formApi | fieldApi would have access to it
• validationSource is redundant, as formApi | fieldApi can infer it
• mySchema can be anything, so this must be passed
• standardSchemaValidators must be imported as a separate 'helper' file.

Given some users may want to add more logic than just a schema to their validation (and based on the discussion in this discord post, I propose the following:

FormApi#getValidationIssuesFromSchema(schema: StandardSchemaV1)

FieldApi#getValidationIssuesFromSchema(schema: StandardSchemaV1)

Name is subject to change. Suggest alternatives!

Usage

validators: {
  onChange: ({ value, formApi }) => {
     const issues = formApi.getValidationIssuesFromSchema(mySchema);
     /*
     readonly StandardSchemaV1Issue[] | {
    form: {
        [k: string]: StandardSchemaV1Issue[];
    };
    fields: {
        [k: string]: StandardSchemaV1Issue[];
    };
} | undefined
     */
     if (issues) return issues;
     
     // other custom validation goes here
  }
}

This would allow users to customize their validation more while preserving the parsing that standardSchemaValidators does.

Important

This method should be stateless. Users should have control over whether to return the issues or not.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit a05f497.

Command	Status	Duration	Result
nx affected --targets=test:sherif,test:knip,tes...	✅ Succeeded	2m 1s	View ↗
nx run-many --target=build --exclude=examples/**	✅ Succeeded	20s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-04-16 14:12:55 UTC

[pkg-pr-new]

More templates

• @tanstack/form-example-angular-array
• @tanstack/form-example-angular-simple
• @tanstack/form-example-lit-simple
• @tanstack/form-example-lit-ui-libraries
• @tanstack/form-example-react-array
• @tanstack/form-example-react-compiler
• @tanstack/field-errors-from-form-validators
• @tanstack/form-example-react-large-form
• @tanstack/form-example-react-next-server-actions
• @tanstack/form-example-react-query-integration
• @tanstack/form-example-react-simple
• @tanstack/form-example-remix
• @tanstack/form-example-react-standard-schema
• @tanstack/form-example-react-tanstack-start
• @tanstack/form-example-react-ui-libraries
• @tanstack/form-example-solid-array
• @tanstack/form-example-solid-simple
• @tanstack/form-example-vue-array
• @tanstack/form-example-vue-simple

@tanstack/angular-form

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

@tanstack/form-core

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

@tanstack/react-form

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

@tanstack/lit-form

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

@tanstack/vue-form

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

@tanstack/solid-form

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

commit: a05f497

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 88.52%. Comparing base (24edab3) to head (a05f497).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1421      +/-   ##
==========================================
+ Coverage   88.37%   88.52%   +0.14%     
==========================================
  Files          28       28              
  Lines        1308     1316       +8     
  Branches      343      343              
==========================================
+ Hits         1156     1165       +9     
+ Misses        135      134       -1     
  Partials       17       17              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[LeCarbonator]

Some name ideas:

• findSchemaIssues(schema: ValidationSchemaV1)
• checkAgainstSchema(schema: ValidationSchemaV1)
• evaluateValuesWithSchema(schema: ValidationSchemaV1)

[LeCarbonator]

parseValuesWithSchema is probably the closest match for now. It's not a word standard schema uses itself, but it describes the stateless method quite well in my opinion.

[Balastrong]

Thanks for the PR, I like how this is turning out!

[LeCarbonator]

That should cover the comments. Also added some type safety to not pass schemas that will set errors on non-existent fields.

[Balastrong]

That's a perfect PR and a really nice addition, thank you so much!