formOptions missing type inference leads to incorrect inferred types in subforms (withForm)

[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 with type inference available. Additionally improving the types/documentation for withForm, and useAppForm to include the following:

Defining any options within useAppForm means they will not flow down to subforms which is leading to a lot of discussions/issues raised on the discord and here.

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

[cjpbright]

Any movement on this? I'm trying to implement a common forms pattern and we make use of form level schema validation.

This issue prevents using withForm to create form sub components effectively, which is quite a problem with large and complicated forms.

[LeCarbonator]

Looks like it works with #1964 . Can you confirm in your case @cjpbright ? The install script can be found in the linked PR.

[cjpbright]

@LeCarbonator - Doesn't look like this resolves the case I was having, but it may be slightly different from the OP case.

Here is a quick rundown of what I'm doing - I wasn't expecting to have to match the validators definitions in the withForm sub component.

I can create a min reproduction repo and a separate issue if necessary.

type DemoFormData = {
	name: string;
	age: number | null;
        //...        
}

const FormSubComponent = withForm({
  // This isn't ideal (i'd prefer a generic parameter), but is easy to maintain.
  defaultValues: getSubFormType<DemoFormData>(), 
  // Without this, a type error is raised when assigning 'form' to the component in MyComponent below
  // but adding it creates a much more specific coupling than I would prefer - 
  // especially as the type error if the parent validators shape changes would be very confusing
  validators: {
   onBlurAsync: getDummySchema<DemoFormData>(),
  },
  render: function Render({ form }) {
		return (
			<div>
				<h4>Sub Component Fields</h4>
				...
			</div>
		);
	} },
);

const defaultValues : DemoFormData = {
   ...
}

const MyComponent = () => {
  const form = useAppForm({
      defaultValues,
      validators: {
        onBlurAsync: yupSchemaInstance
      }
  });

  //...

  return <div>
   {/*Without the sub component also specifying matching validators, this raises a type error*/}
   <FormSubComponent form={form} /> 
</div>

}

function getDummySchema<TFormData extends object>() {
	return {} as yup.ObjectSchema<TFormData>;
}

function getSubFormType<TFormData>() {
	return {} as TFormData;
}

Type error is as follows
The types of 'options.defaultState' are incompatible between these types. Type 'Partial<FormState<DemoFormData, FormValidateOrFn<DemoFormData> | undefined, FormValidateOrFn<DemoFormData> | undefined, ... 7 more ..., FormAsyncValidateOrFn<...> | undefined>> | undefined' is not assignable to type 'Partial<FormState<DemoFormData, any, any, FormAsyncValidateOrFn<DemoFormData> | undefined, any, FormAsyncValidateOrFn<DemoFormData> | undefined, ... 4 more ..., FormAsyncValidateOrFn<...> | undefined>> | undefined'. Type 'Partial<FormState<DemoFormData, FormValidateOrFn<DemoFormData> | undefined, FormValidateOrFn<DemoFormData> | undefined, ... 7 more ..., FormAsyncValidateOrFn<...> | undefined>>' is not assignable to type 'Partial<FormState<DemoFormData, any, any, FormAsyncValidateOrFn<DemoFormData> | undefined, any, FormAsyncValidateOrFn<DemoFormData> | undefined, ... 4 more ..., FormAsyncValidateOrFn<...> | undefined>>'. Types of property 'errorMap' are incompatible. Type 'ValidationErrorMap<undefined, undefined, undefined, undefined, Record<string, StandardSchemaV1Issue[]>, undefined, undefined, undefined, undefined, undefined> | undefined' is not assignable to type 'ValidationErrorMap<any, any, undefined, any, undefined, any, undefined, any, undefined, undefined> | undefined'. Type 'ValidationErrorMap<undefined, undefined, undefined, undefined, Record<string, StandardSchemaV1Issue[]>, undefined, undefined, undefined, undefined, undefined>' is not assignable to type 'ValidationErrorMap<any, any, undefined, any, undefined, any, undefined, any, undefined, undefined>'. Type 'Record<string, StandardSchemaV1Issue[]>' is not assignable to type 'undefined'.ts(2322) createFormHook.d.ts(60, 9): The expected type comes from property 'form' which is declared here on type 'IntrinsicAttributes & { form: AppFieldExtendedReactFormApi<DemoFormData, any, any, FormAsyncValidateOrFn<DemoFormData> | undefined, ... 9 more ..., { ...; }>; } & { ...; }'