Form cannot be resubmitted after setting onSubmit.form error via setErrorMap unless a field value changes

[ludwighogstrom]

Hi 👋

I’m running into an issue with handling temporary server errors in TanStack Form and wanted to sanity-check my approach.

I have a login form using useAppForm (wrapper around useForm) that submits to an API. On server failure, I’m storing the error using setErrorMap under onSubmit.form.

const form = useAppForm({
  defaultValues,
  onSubmit: async (ctx) => {
    const result = await login.mutateAsync({
      username: ctx.value.email,
      password: ctx.value.password,
    });

    if (result.ok) {
      props.onSuccess();
    } else {
      ctx.formApi.setErrorMap({
        onSubmit: { form: result.error, fields: {} },
      });
    }
  },
  onSubmitInvalid: () => {
    formRef.current && focusOnFirstInvalid(formRef.current);
  },
});

Problem

After setErrorMap({ onSubmit }) is called:

• The form cannot be submitted again
• onSubmit does not fire
• Submission only becomes possible again if the user changes any input value

This makes it difficult to handle temporary server errors (e.g. network issue, 500, rate limit), where the user should be able to simply click “Submit” again without changing anything.

Questions

1. Is onSubmit.form the correct place to store server-side submission errors?
2. Is this behavior expected — does setting onSubmit.form intentionally block resubmission until form state changes?
3. What is the recommended pattern for retryable / transient server errors where the form values are still valid?
   • Should these errors live outside the form state?
   • Should they be cleared manually before resubmitting?
   • Is there a better API for this use case?

I may be misunderstanding the intended semantics of onSubmit.form, so any guidance on what that error bucket is designed for would be super helpful.

Thanks in advance!