T
TanStack•5mo ago
helpful-purple

withForm-TypeError-fix

 tsx export const AddressComponent = withForm({
  props:{name},
  render: ({ form,name }) => {
    return (
      <div className="flex flex-col gap-4">
        <form.AppField
          name={name }
          children={(field) => <field.BasicInputField label="Street" />}
        />
       
      </div>
    );
  },
}); 
 tsx export const AddressComponent = withForm({
  props:{name},
  render: ({ form,name }) => {
    return (
      <div className="flex flex-col gap-4">
        <form.AppField
          name={name }
          children={(field) => <field.BasicInputField label="Street" />}
        />
       
      </div>
    );
  },
});

Type 'AppFieldExtendedReactFormApi<{ name: string; age: string; mobileNumber: string; note: string; address: { streetLine: string; }; }, FormValidateOrFn<{ name: string; age: string; mobileNumber: string; note: string; address: { streetLine: string; }; }> | undefined, ... 9 more ..., { ...; }>' is not assignable to type 'AppFieldExtendedReactFormApi<any, any, any, FormAsyncValidateOrFn<unknown> | undefined, any, FormAsyncValidateOrFn<unknown> | undefined, any, FormAsyncValidateOrFn<unknown> | undefined, FormAsyncValidateOrFn<...> | undefined, any, { ...; }, { ...; }>'. <AddressComponent form={form} /> is giving a TypeError. Is there any way to fix this error without explicitly using type any?
3 Replies
provincial-silver
provincial-silver•5mo ago
Please put your code in backticks like this:
No description
helpful-purple
helpful-purpleOP•5mo ago
Okay I fixed it
ambitious-aqua
ambitious-aqua•5mo ago
it means your AddressComponent and form={form} are different forms. * Do they share the same defaultValues? * Do they share the same validators?

Did you find this page helpful?