export interface FormButtonProps<TFormData> extends ActionButtonProps { form: ReactFormExtendedApi
Generic type 'ReactFormExtendedApi' requires 10 type argument(s).ts(2314)
(alias) type ReactFormExtendedApi<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>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta> = FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta> & ReactFormApi<...>
import ReactFormExtendedApi why this typeError comed.Has any update happened in TanStack? ? how can i fix this error?
9 Replies
xenial-black•5mo ago
Please put the Code Examples in 3 backticks like this:
``
https://support.discord.com/hc/en-us/articles/210298617-Markdown-Text-101-Chat-Formatting-Bold-Italic-Underline#h_01GY0DAKGXDEHE263BCAYEGFJA
Where do you use the ReactFormExtendedApi`?adverse-sapphireOP•5mo ago
import { FormHTMLAttributes } from "react";
import { ReactFormExtendedApi } from "@tanstack/react-form";
import { cn } from "@/vendor/shadcn/lib/utils";
interface FormWrapperProps<TFormData>
extends Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
form: ReactFormExtendedApi<TFormData>;
children: React.ReactNode;
className?: string;
}
export const FormWrapper = <TFormData,>({
form,
children,
className,
...props
}: FormWrapperProps<TFormData>) => {
return (
<form
{...props}
className={cn(className)}
onSubmit={(event) => {
event.preventDefault();
event.stopPropagation();
form.handleSubmit();
}}
noValidate
>
{children}
</form>
);
};
Generic type 'ReactFormExtendedApi' requires 10 type argument(s).ts(2314)
(alias) type ReactFormExtendedApi<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>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta> = FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta> & ReactFormApi<...>
import ReactFormExtendedApi how can i fix this error ? any other way
graceful-beige•5mo ago
You are only passing one generic when it expects 10. Have you upgraded from a version before
v0.42 to the new release perhaps?graceful-beige•5mo ago
Form composition is the intended way to create custom components. You can read up on it here: https://tanstack.com/form/latest/docs/framework/react/guides/form-composition
Form Composition | TanStack Form React Docs
A common criticism of TanStack Form is its verbosity out-of-the-box. While this can be useful for educational purposes helping enforce understanding our APIs it's not ideal in production use cases. As...
adverse-sapphireOP•5mo ago
Yes. We have just upgraded from 0.41.3 to 1.3.0.
graceful-beige•5mo ago
the types themselves have changed a lot. the form API currently has 10 generics, while the field API has 18. This might change in the future, so the form composition API addresses this
it's a big refactor though if you relied on passing it as prop before
adverse-sapphireOP•5mo ago
Can't we pass it as prop anymore? is there any way to keep my existing code work just by making any type changes?
graceful-beige•5mo ago
it's not the intended way nor supported in case future generics show up
it's more type safe to use form composition at this point
adverse-sapphireOP•5mo ago
Okay. Has to change the component.