Typing in createFormHook

[tollanes]

Hi, I was wondering if we are supposed to get typing while using useAppForm and the createFormHook? Because I don't seem to be get those.

useFormContext.tsx

import { createFormHook, createFormHookContexts } from '@tanstack/react-form';

import SubmitButton from '@/components/Shared/FormElements/SubmitButton';
import TextField from '@/components/Shared/FormElements/TextField';
import NumberField from '@/components/Shared/FormElements/NumberField';
import SelectField from '@/components/Shared/FormElements/SelectField';

export const { fieldContext, formContext, useFieldContext, useFormContext } =
  createFormHookContexts();

export const { useAppForm } = createFormHook({
  fieldComponents: {
    TextField,
    NumberField,
    SelectField,
  },
  formComponents: {
    SubmitButton,
  },
  fieldContext,
  formContext,
});

TextField.tsx

import { useFieldContext } from '@/lib/hooks/useFormContext';

const TextField = ({ label }: { label: string }) => {
  // The `Field` infers that it should have a `value` type of `string`
  const field = useFieldContext<string>();
  return (
    <label>
      <div>{label}</div>
      <input
        value={field.state.value}
        onChange={(e) => field.handleChange(e.target.value)}
      />
    </label>
  );
};

export default TextField;

example form

'use client';

import { useAppForm } from '@/lib/hooks/useFormContext';
import { useForm } from '@tanstack/react-form';

export enum CalculationBasis {
  LastYear = 'lastYear',
  Last3Years = 'last3Years',
}

export interface SolarInsightsFormValues {
  name: string;
  calculationBasis: string;
  effectMaxPeak: number;
  scalingFactor: number;
  totalPrice: number;
  enovaSupport: number;
  yearlyChangePowerPrice: number;
  yearlyChangeGridProductPrice: number;
}

const SolarInsightsForm = () => {
  const form = useAppForm({
    defaultValues: {
      name: '',
      calculationBasis: CalculationBasis.LastYear,
      effectMaxPeak: 0,
      scalingFactor: 1,
      totalPrice: 0,
      enovaSupport: 0,
      yearlyChangeGridProductPrice: 0,
      yearlyChangePowerPrice: 0,
    } as SolarInsightsFormValues,
    onSubmit: async (values) => {
      console.log('Form submitted with values:', values);
      // Handle form submission logic here
    },
  });

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        e.stopPropagation();
        form.handleSubmit();
      }}
    >
      <h1>Solar stuff</h1>

      <form.AppField
        name="name"
        children={(field) => <field.TextField label="Name" />}
      />

      <form.AppForm>
        <form.SubmitButton label="Submit" />
      </form.AppForm>
    </form>
  );
};

export default SolarInsightsForm;

First of all field here is typed as any and gets the red squiggly of shame

Secondly I get no type hints on the names if they are wrong or not.

Am I configuring the interface types wrong or is there a missing feature?

[wendyprogramic]

I was wondering the same thing. When I check the sandbox example referenced in the documentation (https://tanstack.com/form/latest/docs/framework/react/examples/large-form), specifically this link: https://codesandbox.io/p/devbox/github/tanstack/form/tree/main/examples/react/large-form?embed=1&file=%2Fsrc%2Ffeatures%2Fpeople%2Fpage.tsx&theme=dark, I also notice that the field type is not inferred — it defaults to any.
Hope there is a solution to get it safely typed.

[tollanes]

Hi, for some reason it started working if I updated my typescript to "typescript": "5.8.3", 🤷

[wendyprogramic]

Thank you so much, that works!