T
TanStack•2mo ago
stormy-gold

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';
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: {},
});
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>
  )
};
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>
  )
};
3 Replies
stormy-gold
stormy-goldOP•2mo ago
So far so good, right? Everything's working. But then in my CommonSection.tsx when I try to access my form through useFormContext like this: 
export default function CommonSection({ company }: CommonSectionProps) {
  const { t } = useTranslation();
  const form = useFormContext();
 
  return (
    <form.AppField name="potential_fleet">{(field) => <field.FormInput type="number" />}</form.AppField>
  )
}; 
export default function CommonSection({ company }: CommonSectionProps) {
  const { t } = useTranslation();
  const form = useFormContext();
 
  return (
    <form.AppField name="potential_fleet">{(field) => <field.FormInput type="number" />}</form.AppField>
  )
};
It's giving me: Property 'AppField' does not exist on type 'ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any>'.ts(2339) However, if I load my application all is working well. So for some reason my editor is telling me: this is not possible but in reality it's all working correctly. Tried restarting editor, reloading everything it's just not accepting that AppField exists on the form. The thing is, when I copy everything from CommonSection into the component where I use `useAppForm and access the form instance, it shows that AppField DOES exist on it. Any idea what to do in order to fix this
foreign-sapphire
foreign-sapphire•2mo ago
Two thoughts: * The type is a bit iffy there. You create contexts before creating a form hook, so technically it is correct to assume that you do not have access to AppField. However, since calling your form component will be done by an App Form, it will have access to AppField. So that sounds like a type issue at the moment. * This is for grouping multiple fields together to use for multiple forms, right? If so, there's a PR in the works to address field groups if you want to give that a spin and give feedback before it's released: npm i https://pkg.pr.new/@tanstack/react-form@1469
stormy-gold
stormy-goldOP•2mo ago
Thanks a lot will give it a whirl on Monday!

Did you find this page helpful?