Missing type inference with Validators in formOptions

[juanvilladev]

Describe the bug

Currently, defining validators within the formOptions function does not allow proper type inference from defaultOptions. To retain type inference, users are forced to define validators within useAppForm at the top-level form.

However, this causes a problem for sub-form components that use withForm. If these sub-forms rely on the return type of formOptions, they do not inherit the validators defined in useAppForm. As a result, fields within the sub-forms lack access to the form-level validators, leading to incorrect type inference. (No issues at runtime).

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-form-ajwjukhq?file=src%2Ffeatures%2Fpeople%2Fshared-form.tsx

Steps to reproduce

Simply go to shared-form.tsx and notice the value prop for validators > onChange is any. This illustrates the lack of type inference within formOptions.

Within this second stackblitz you can see what I mean about incorrect type inference if defining validators within useAppForm:

https://stackblitz.com/edit/tanstack-form-oennwahz?file=src%2Ffeatures%2Fpeople%2Faddress-fields.tsx

For this one, notice how within useAppField, we defined an error for that address.line1 that returns a number! We then defined a validator at the field level for the same field that returns string.

Given we made it so TextField accepts an error prop of type string | undefined, we would expect a type error if we try to pass field.state.errors[0], because the correct type should be string | number | undefined. However the inferred type for fiels.state.errors[0] is string | undefined because it has no clue that we defined validators within useAppForm.

This could result in runtime bugs as the inferred type is NOT what's at runtime.

Expected behavior

We would expect for the formOptions function to allow defining validators there. Ideally recommend users don't define their validations inside useAppForm else risking the wrong type inference?

This way when we spread formOptions into withForm, we correctly receive the validator types defined at the form level.

How often does this bug happen?

Every time

Screenshots or Videos

No type inference within formOptions: Type inference when defining validators within useAppForm:

Also recommend seeing this discord thread with @crutchcorn for more context: https://discord.com/channels/719702312431386674/1349567229305557002/1349567229305557002

Platform

Consistent issue with any typescript environment.

TanStack Form adapter

react-form

TanStack Form version

v1.0.5

TypeScript version

No response

Additional context

No response