`any` type in form validators when using formOptions

[pedro757]

Describe the bug

const formOpts = formOptions({
  defaultValues: {
    description: "",
  },
  validators: {
    onSubmit: data => { //// HERE data IS any
      console.log("validando", data); // OUTPUT: { value: { description: "" }, formApi: {...
    }
  }
});

Your minimal, reproducible example

. just copy the code above

Steps to reproduce

1. Copy and paste this code in your editor, see the type of data

const formOpts = formOptions({
  defaultValues: {
    description: "",
  },
  validators: {
    onSubmit: data => { //// HERE data IS any
      console.log("validando", data); // OUTPUT: { value: { description: "" }, formApi: {...
    }
  }
});

Expected behavior

I expected to infer the type

How often does this bug happen?

Every time

Screenshots or Videos

Platform

• linux

TanStack Form adapter

react-form

TanStack Form version

v1.14.1

TypeScript version

v5.8.3

Additional context

Maybe related to #1583

[kusiewicz]

The formOptions function is a simple helper designed for creating reusable configurations.

A practical example is when you want to split a large form across multiple files. In that scenario, you can use formOptions to define a shared configuration that is then passed to other utilities, such as withForm.

https://tanstack.com/form/latest/docs/framework/react/guides/form-composition#breaking-big-forms-into-smaller-pieces

The type is loose
export declare function formOptions<T extends Partial<FormOptions<any, any, any, any, any, any, any, any, any, any>>>(defaultOpts: T): T;

Since inferencing with withForm will break if this is changed.

[LeCarbonator]

formOptions should generate the form options you give it. At the moment, it appears to be limited, which defeats its purpose.

I see that overriding values can be problematic, which thankfully is covered by unit tests.

The concern is:

const formOpts = formOptions({
    defaultValues: { firstName: '' } as Person,
    // if it infers Person here
    validators: ({ value }) => {
       return somethingElse(value)  
    }
})

const Component = withForm({
    ...formOpts,
    // then this would break
    defaultValues: { firstName: '', lastName: '' } as ExtendedPerson
})

[pedro757]

@kusiewicz as @LeCarbonator said, the problem is when you need to use formOptions like this:

const formOpts = formOptions({
  defaultValues: {
    description: "",
  },
});


  const form = useForm({
    ...formOpts,
    validators: {
      onSubmit: (data) => {    // HERE data IS any
         // 
      },
    },
  });

Right now, the type inference in form validators only works if you declare the defaultValues in the useForm itself, like this:

  const form = useForm({
  defaultValues: {
    description: "",
  },
    validators: {
      onSubmit: (data) => {    // TYPE IS INFERRED CORRECTLY
         // 
      },
    },
  });

[a-is-4-adam]

I had a go trying to fix this but am coming up short :/

Changing formOption's type to this

export function formOptions<
  TFormData,
  TOnMount extends undefined | FormValidateOrFn<TFormData>,
  TOnChange extends undefined | FormValidateOrFn<TFormData>,
  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
  TOnBlur extends undefined | FormValidateOrFn<TFormData>,
  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,
  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
  TSubmitMeta = never,
>(
  defaultOpts: Partial<
    FormOptions<
      TFormData,
      TOnMount,
      TOnChange,
      TOnChangeAsync,
      TOnBlur,
      TOnBlurAsync,
      TOnSubmit,
      TOnSubmitAsync,
      TOnDynamic,
      TOnDynamicAsync,
      TOnServer,
      TSubmitMeta
    >
  >,
): Partial<
  FormOptions<
    TFormData,
    TOnMount,
    TOnChange,
    TOnChangeAsync,
    TOnBlur,
    TOnBlurAsync,
    TOnSubmit,
    TOnSubmitAsync,
    TOnDynamic,
    TOnDynamicAsync,
    TOnServer,
    TSubmitMeta
  >
> {
  return defaultOpts
}

fixes the types but breaks spreading extra options in like so

useForm({
      ...formOpts,
      defaultValues: {
        firstName: 'John',
        lastName: 'Doe',
        age: 10,
      })

Should the docs be changed to communicate that validators and listeners shouldn't be added to formOptions? Or does anyone have any other ideas on what I could try to fix this

[LeCarbonator]

@a-is-4-adam at least for overwriting with different values, it can be argued that it doesn't match what the formOptions generated. However, what happens if you try to change the generated options with your implementation?

• FormOptions with only defaultValues, extend by adding validators
• FormOptions with validators, extend by overwriting validators

[a-is-4-adam]

Looks like any validators can be added when only default values are added to formOptions are spread into useForm. When overwriting validators the specific validator, i.e onSubmit, has to conform to the same type as the original validator defined in the formOptions. Validators not defined in the formOptions can be defined in useForm without any problems.

I've put up a draft PR to show this working #1679

[pedro757]

One question, with this #1679 we shouldn't use validators and onSubmit in formOptions(), right ? I'm using v1.19.1

  type RowsFormType = { id: string }[]

  const formOpts2 = formOptions({
    defaultValues: {
      rows: [] as RowsFormType,
    },
    onSubmit: data => {
      console.log(data);
    },
    validators: {
      onSubmit: (data: { value: { rows: RowsFormType } }) => { 
        if (data.value.rows.length < 2) {
          return "It should have at least one row";
        }
      },
    },
  });

function Afddd() {
  const form = useAppForm(formOpts2); /// ERRORS

}

This is the error

1. tsserver: Argument of type '{ defaultValues: { rows: RowsFormType; }; onSubmit: (data: { value: { rows: RowsFormType; }; formApi: FormApi<{ rows: RowsFormType; }, FormValidateOrFn<{ rows: RowsFormType; }> | undefined, ... 9 more ..., unknown>; meta: unknown; }) => void; validators: { ...; }; }' is not assignable to parameter of type 'FormOptions<{ rows: RowsFormType; }, FormValidateOrFn<{ rows: RowsFormType; }> | undefined, FormValidateOrFn<{ rows: RowsFormType; }> | undefined, ... 8 more ..., unknown>'.
     Types of property 'onSubmit' are incompatible.
       Type '(data: { value: { rows: RowsFormType; }; formApi: FormApi<{ rows: RowsFormType; }, FormValidateOrFn<{ rows: RowsFormType; }> | undefined, ... 9 more ..., unknown>; meta: unknown; }) => void' is not assignable to type '(props: { value: { rows: RowsFormType; }; formApi: FormApi<{ rows: RowsFormType; }, FormValidateOrFn<{ rows: RowsFormType; }> | undefined, ... 9 more ..., unknown>; meta: unknown; }) => any'.
         Types of parameters 'data' and 'props' are incompatible.
           Type '{ value: { rows: RowsFormType; }; formApi: import("/home/myuser/Documents/myproject/node_modules/@tanstack/form-core/dist/esm/FormApi").FormApi<{ rows: RowsFormType; }, import("/home/myuser/Documents/myproject/node_modules/@tanstack/form-core/dist/esm/FormApi").FormValidateOrFn<{ rows: RowsFormType; }> | undefined...' is not assignable to type '{ value: { rows: RowsFormType; }; formApi: import("/home/myuser/Documents/myproject/node_modules/@tanstack/form-core/dist/esm/FormApi").FormApi<{ rows: RowsFormType; }, import("/home/myuser/Documents/myproject/node_modules/@tanstack/form-core/dist/esm/FormApi").FormValidateOrFn<{ rows: RowsFormType; }> | undefined...'. Two different types with this name exist, but they are unrelated.
             The types of 'formApi.options.defaultState' are incompatible between these types.
               Type 'Partial<import("/home/myuser/Documents/myproject/node_modules/@tanstack/form-core/dist/esm/FormApi").FormState<{ rows: RowsFormType; }, import("/home/myuser/Documents/myproject/node_modules/@tanstack/form-core/dist/esm/FormApi").FormValidateOrFn<{ rows: RowsFormType; }> | undefined, ... 8 more ..., import("/home/p...' is not assignable to type 'Partial<import("/home/myuser/Documents/myproject/node_modules/@tanstack/form-core/dist/esm/FormApi").FormState<{ rows: RowsFormType; }, import("/home/myuser/Documents/myproject/node_modules/@tanstack/form-core/dist/esm/FormApi").FormValidateOrFn<{ rows: RowsFormType; }> | undefined, ... 8 more ..., import("/home/p...'. Two different types with this name exist, but they are unrelated.
                 Type 'Partial<import("/home/myuser/Documents/myproject/node_modules/@tanstack/form-core/dist/esm/FormApi").FormState<{ rows: RowsFormType; }, import("/home/myuser/Documents/myproject/node_modules/@tanstack/form-core/dist/esm/FormApi").FormValidateOrFn<{ rows: RowsFormType; }> | undefined, ... 8 more ..., import("/home/p...' is not assignable to type 'Partial<import("/home/myuser/Documents/myproject/node_modules/@tanstack/form-core/dist/esm/FormApi").FormState<{ rows: RowsFormType; }, import("/home/myuser/Documents/myproject/node_modules/@tanstack/form-core/dist/esm/FormApi").FormValidateOrFn<{ rows: RowsFormType; }> | undefined, ... 8 more ..., import("/home/p...'. Two different types with this name exist, but they are unrelated.
                   Types of property 'errorMap' are incompatible.
                     Type 'ValidationErrorMap<undefined, undefined, undefined, undefined, undefined, "It should have at least one row" | undefined, undefined, undefined, undefined, undefined> | undefined' is not assignable to type 'ValidationErrorMap<undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined> | undefined'.
                       Type 'ValidationErrorMap<undefined, undefined, undefined, undefined, undefined, "It should have at least one row" | undefined, undefined, undefined, undefined, undefined>' is not assignable to type 'ValidationErrorMap<undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined>'.
                         Type '"It should have at least one row" | undefined' is not assignable to type 'undefined'.
                           Type '"It should have at least one row"' is not assignable to type 'undefined'. [2345]

I think that if we are not supposed to use certain properties in formOptions we should remove them.

[pedro757]

@a-is-4-adam @LeCarbonator see the error introduced in the latest version described in the previous message.

[kusiewicz]

I updated to the latest version and still has not typed values in validators. So how it should look like?

[LeCarbonator]

Uh oh ... it looks like I was too eager with the merge there ... sorry about that!
Will revert it in a bit. Looks like the unit tests in the PR didn't have the validator parameter, which breaks it.