TanStackT
TanStack•7mo ago•
3 replies
verbal-lime

AppField doesn't exist on form object returned from useFormContext()

I've been trying to get this to work for two hours now. The premise sounds great but for some reason type inference isn't working.

I have my form-context.ts file:
import { createFormHookContexts } from '@tanstack/react-form';
 
export const { fieldContext, formContext, useFieldContext, useFormContext } = createFormHookContexts();import { createFormHookContexts } from '@tanstack/react-form';


Then my form.ts file for exporting the useAppForm hook:
import { createFormHook } from '@tanstack/react-form';
import { FormInput } from '../components/Form/FormInput';
import { fieldContext, formContext } from './form-context';
 
export const { useAppForm } = createFormHook({
  fieldContext,
  formContext,
  fieldComponents: {
    FormInput,
  },
  formComponents: {},
});


Then the place where I want to create my form:
export default function CompanyView({ company }: { company: CompanyRead }) {
  const { t } = useTranslation();
 
  const form = useAppForm({
    defaultValues: company,
    onSubmit: (values) => {
      console.log(values);
    },
  });
 
  return (
    <form.AppForm>
      {...}
        <Grid size={12}>
          <CommonSection company={company} />
        </Grid>
      {...}
    <form.AppForm>
  )
};
Was this page helpful?