T
TanStack•5mo ago
typical-coral

How can I get the onSubmit type?

I need the data type from on submit
No description
7 Replies
rival-black
rival-black•5mo ago
what‘s the action you‘re performing with formApi in the handleSubmit function?
typical-coral
typical-coralOP•5mo ago
I wanna handle the submit outside. So I need the form API to pass errors if I need
rival-black
rival-black•5mo ago
If you mean errors as in server-related errors ("username is already taken"), that doesn't belong in onSubmit. onSubmit is for stuff that happens after all validation is done. If you need to send it to a server and receive errors, perform the call in the validator onSubmitAsync. if the error is unrelated to the user and just for errors in general, then the form shouldn't be the one displaying the error as it's not validation-related but yeah, if you want to extract that onSubmitAsync validator, we'd be back to your question. So you have two options: 1. Any form Api will do as you don't need access to the values 
formApi: AnyFormApi
formApi: AnyFormApi
2. You need access to the specific form's values. This may break in the future as new generics are introduced 
formApi: FormApi<YourDataType, any, any, any, any, any, any, any, any, YourSubmitMeta>
formApi: FormApi<YourDataType, any, any, any, any, any, any, any, any, YourSubmitMeta>
frozen-sapphire
frozen-sapphire•3mo ago
@Luca | LeCarbonator hey bit of a necro, is the 2nd option the "ideal" way to accomplish this? I just want to pass in my mutation fn as a callback, I dont need error handling but I may want to reset the form or what have you 
type Props = {
  initialValues: MyFormValues;
  handleSubmit: (stuff: ???<MyFormValues>) => Promise<unknown>;
  handleCancel?: () => void;
};
export function MyReusableForm(props: Props): React.JSX.Element {
  const form = useAppForm({
    defaultValues: props.initialValues,
    onSubmit: props.handleSubmit
  });

  ...
type Props = {
  initialValues: MyFormValues;
  handleSubmit: (stuff: ???<MyFormValues>) => Promise<unknown>;
  handleCancel?: () => void;
};
export function MyReusableForm(props: Props): React.JSX.Element {
  const form = useAppForm({
    defaultValues: props.initialValues,
    onSubmit: props.handleSubmit
  });

  ...
rival-black
rival-black•3mo ago
if you need a reset, make an async anonymous function that awaits the handleSubmit prop then check for a boolean prop to see if a reset is desired but yeah, looks like it works well
frozen-sapphire
frozen-sapphire•3mo ago
I may only need reset in some instances of the form. I opted for this beauty and I'll bury it deep somewhere lol 
type Props = {
  initialValues: SiteFormValues;
  handleSubmit: ReactFormSubmitHandler<SiteFormValues>;
  handleCancel?: () => void;
};

export type ReactFormSubmitHandler<T extends Record<string, any>> = (props: {
  value: T;
  formApi: FormApi<T, any, any, any, any, any, any, any, any, any>;
  meta: unknown;
}) => Promise<void>;
type Props = {
  initialValues: SiteFormValues;
  handleSubmit: ReactFormSubmitHandler<SiteFormValues>;
  handleCancel?: () => void;
};

export type ReactFormSubmitHandler<T extends Record<string, any>> = (props: {
  value: T;
  formApi: FormApi<T, any, any, any, any, any, any, any, any, any>;
  meta: unknown;
}) => Promise<void>;
rival-black
rival-black•3mo ago
I‘m not quite sure what your end goal is You’re committing to a lot of abstraction and rigidity with this setup oh wait I may have written in the wrong channel, one moment :picard_facepalm: nope, it was the correct one.

Did you find this page helpful?