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!

[bavjackson]

I had a similar issue, and the workaround I found for the moment at least is to set canSubmitWhenInvalid to true then set the error map empty in the form submit function.

<form
	onSubmit={(e) => {
		e.preventDefault();
		e.stopPropagation();
		form.setErrorMap({
			onSubmit: {
				fields: {},
			},
		});
		form.handleSubmit();
	}}
>

[bavjackson]

I'm also submitting my form via the validators.onSubmitAsync method (as suggested here) and returning an error on the email field.

[ludwighogstrom]

Hmm, not sure if that workaround would work in our case. Thanks for the suggestion!

I’d also like to get an “official” answer on this.

[crutchcorn]

#2188

We're working on this. Please let us know if this API doesn't work for your needs for any reason