How to fields disable when form submitting? | TanStack | Page 1

cobalt birch Nov 12, 2025, 8:32 AM

#

This is my reusable code and i try to add disable when submitting but it is not working. It update as true when submit click but not update again to false when validation error or submit finished.

I used this code to check it - {"Subminiting?:" + (field.form.state.isSubmitting === true ? "Yes" : "No")}

<Field
      data-invalid={field.state.meta.isTouched && !field.state.meta.isValid}
    >
      {label && <FieldLabel htmlFor={field.name}>{label || ""}</FieldLabel>}
      <Input
        value={field.state.value}
        type={type || "text"}
        name={field.name}
        id={field.name}
        placeholder={placeholder || ""}
        autoComplete={autoComplete}
        required={required ?? true}
        onBlur={field.handleBlur}
        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
          field.handleChange(e.target.value)
        }
        {...others}
        disabled={field.form.state.isSubmitting}
      />
      {"Subminiting?:" +
        (field.form.state.isSubmitting === true ? "Yes" : "No")}
      {console.log(field.form)}
      {description && <FieldDescription>{description}</FieldDescription>}
      {children}
      <FieldInfo field={field} />
    </Field>```

fossil current Nov 12, 2025, 8:33 AM

#

cobalt birch This is my reusable code and i try to add disable when submitting but it is not ...

This is my reusable code
Are you using form composition, or are you passing this in the callback?

tall cloud Nov 12, 2025, 8:34 AM

#

isSubmitting flag

fossil current Nov 12, 2025, 8:36 AM

#

the flag's correct, but it's likely not reactive on its own. You'll want to use one of the two ways to get a reactive value

// rerender whenever isSubmitting changes
const isSubmitting = useStore(form.store, state => state.isSubmitting)

<form.Subscribe selector={state => state.isSubmitting}>
  {isSubmitting => <></>}
</form.Subscribe>

cobalt birch Nov 12, 2025, 8:36 AM

#

fossil current > This is my reusable code Are you using form composition, or are you passing th...

This is form component for reuse.

export default function Form(
  props: PropsWithChildren<
    {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      form: any;
      className?: string;
      onSubmit?: React.FormEventHandler<HTMLFormElement>;
    } & React.FormHTMLAttributes<HTMLFormElement>
  >
) {
  const { children, form, className, onSubmit, ...rest } = props as any;
  return (
    <FormContext.Provider value={form}>
      <form
        noValidate
        className={className || "space-y-4"}
        onSubmit={(e) => {
          e.preventDefault();
          e.stopPropagation();
          if (onSubmit) onSubmit(e);
          if (form?.handleSubmit) form.handleSubmit(); // { submitAction: "continue" }
        }}
        {...rest}
      >
        <FieldGroup>{children}</FieldGroup>
      </form>
    </FormContext.Provider>
  );
}```

fossil current Nov 12, 2025, 8:37 AM

#

this feels like you want form composition instead. 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...

cobalt birch Nov 12, 2025, 8:42 AM

#

I use that form compoent and in between <Form></Form> I use FeildInput Component. I can not add full code to this becuase it ask to money.

return (
    <form.Field name={name} validators={validators} listeners={listeners || {}}>
      {array
        ? (subField: any) => renderComponent(subField)
        : (field: any) => renderComponent(field)}
    </form.Field>
  );```

This renderComponent is above first code and it is inside this ` const renderComponent = (field: any) => ( ABOVE CODE FIST CODE WHEN ASK QUESTION)`. Is this wrong?

fossil current Nov 12, 2025, 8:43 AM

#

fossil current the flag's correct, but it's likely not reactive on its own. You'll want to use ...

it's not type safe, so I'll recommend the docs I sent.

Anyways, your forum post's about the isSubmitting part, so that can be solved by the comment I sent here:

#

You said that it worked from false -> true, but not true -> false. That was a coincidence. It actually rerendered because the field has gone from isTouched: false -> isTouched: true

cobalt birch Nov 12, 2025, 8:46 AM

#

fossil current it's not type safe, so I'll recommend the docs I sent. Anyways, your forum post...

Yes, it go to isTouched: false -> isTouched: true. is it related to isSubmitting and not to update?

fossil current Nov 12, 2025, 8:48 AM

#

fossil current the flag's correct, but it's likely not reactive on its own. You'll want to use ...

isSubmitting does not cause rerenders on its own. You need to subscribe to it.

#

It would look something like:

<field.form.Subscribe selector={state => state.isSubmitting}>
  {isSubmitting => (
   <Input
        value={field.state.value}
        type={type || "text"}
        name={field.name}
        id={field.name}
        placeholder={placeholder || ""}
        autoComplete={autoComplete}
        required={required ?? true}
        onBlur={field.handleBlur}
        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
          field.handleChange(e.target.value)
        }
        {...others}
        disabled={isSubmitting}
      />
  )}
</field.form.Subscribe>

cobalt birch Nov 12, 2025, 8:51 AM

#

ok i will check it

#

thank you very much

cobalt birch Nov 13, 2025, 4:22 AM

#

fossil current It would look something like: ```tsx <field.form.Subscribe selector={state => st...

 const field = useFieldContext();
  const isSubmitting = useStore(
    field.form.store,
    (state) => state.isSubmitting
  );
  return (
    <Field
      data-invalid={field.state.meta.isTouched && !field.state.meta.isValid}
    >
      {label && <FieldLabel htmlFor={field.name}>{label}</FieldLabel>}

      <Input
        value={field.state.value}
        type={type || "text"}
        name={field.name}
        id={field.name}
        placeholder={placeholder || ""}
        autoComplete={autoComplete}
        required={required ?? true}
        aria-invalid={field.state.meta.isTouched && !field.state.meta.isValid}
        onBlur={field.handleBlur}
        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
          field.handleChange(e.target.value)
        }
        disabled={isSubmitting}
        {...others}
      />
      {"isSubmitting? " + isSubmitting}
      {description && <FieldDescription>{description}</FieldDescription>}
      {children}
      <FieldInfo field={field} />
    </Field>
  );
}```

#

Why this code not work?

#

I always get false for {"isSubmitting? " + isSubmitting} but form is submited

fossil current Nov 13, 2025, 4:53 AM

#

cobalt birch I always get false for `{"isSubmitting? " + isSubmitting}` but form is submited

isSubmitting - Is the form currently in the process of submitting

isSubmitted - The form has successfully submitted

cobalt birch Nov 13, 2025, 4:59 AM

#

fossil current isSubmitt**ing** - Is the form currently in the process of submitting isSubmitt...

Yes, i need to disable input field while submiting, but above code not work

#

is that because i used const field = useFieldContext(); ?

#

I mean during the form submitting progress, text field not disabled. Always show false even submitting process in {"isSubmitting? " + isSubmitting}.

#

const { useAppForm, withForm } = createFormHook({
  fieldComponents: {
    TextField,
  },
  formComponents: {
    SubscribeButton,
  },
  fieldContext,
  formContext,
});

const formOpts = formOptions({
  defaultValues: {
    firstName: "John",
    lastName: "Doe",
  },
});

const ChildForm = withForm({
  ...formOpts,
  // Optional, but adds props to the `render` function outside of `form`
  props: {
    title: "Child Form",
  },
  render: ({ form, title }) => {
    return (
      <div>
        <p>{title}</p>
        <form.AppField
          name="firstName"
          children={(field) => (
            <field.TextField label="First Name" name="firstName" />
          )}
        />
        <form.AppForm>
          <form.SubscribeButton label="Submit" />
        </form.AppForm>
      </div>
    );
  },
});

function RouteComponent() {
  const form = useAppForm({
    ...formOpts,
    onSubmit: ({ value }) => {
      // Add artificial delay to simulate form submission
      setTimeout(() => {
        console.log(value);
      }, 10000);
    },
  });

  return (
    <>
      <form
        id="bug-report-form"
        onSubmit={(e) => {
          e.preventDefault();
          // e.stopPropagation();
          form.handleSubmit(e);
        }}
      >
        <h1>Form Check</h1>
        <ChildForm form={form} title={"Testing"} />
      </form>
    </>
  );
}```

#

I found the error, field.form.store.state.isSubmitting update quickly but values will delay. I do not know why.

When use {console.log(field.form.store.state.isSubmitting)} console see false true false quickly but values print in delay after 10000.

#

Why isSubmitting is update quickly? isSubmitting should true until 10000 delay.

#

I found the solution it should be async delay. 🥹

crisp flicker Feb 24, 2026, 9:53 AM

#

hey sers, what is the move "tanstack" way to use form + query ?
We have a debate on what should we use to mark submitting button form as disabled.
Should we use isSubmitting hence we have to use return a promise in onSubmit and use a try catch here
Or use the mutate state isPending and use callback for onError and such
Best !

fossil current Feb 24, 2026, 9:59 AM

#

crisp flicker hey sers, what is the move "tanstack" way to use form + query ? We have a debate...

depends on what you prefer.

Form's isSubmitting is true while onSubmit's promise is ongoing, and will affect isSubmitSuccessful and isSubmitted after completion.

That would rely on the mutation being called with mutateAsync so it can be awaited. If you prefer using onSuccess / onError from TanStack Query, those should still work as expected.

#

isSubmitting is reachable anywhere where there's a form available, so it works well with form components like a submit button.

If you're always explicit about it and prefer it that way, then mutation.isPending works just fine too

crisp flicker Feb 24, 2026, 10:18 AM

#

Yes the only gotcha for me with mutateAsync is that onError callback sill throw the error in promise. we try to avoid try catch as much as possible 🙁

#How to fields disable when form submitting?