[Feature request] Global/root form error, independent of form fields

[bennettdams]

Hey!
I think it would be nice to have a global/root form error that you can show next to the form.

Imagine a user submits its form, (client) validation is successful, request is sent to the backend. But something goes wrong (network, business logic, etc.), so we'll e.g. get a 400 response.
For such, I want to show a message next to the form.

You could obviously do this yourself, but then you also have to keep track of the form's submissions, as the error may goes away after the next submit. So integrating it as part of the form would be nice.

The easiest solution in my head is to have a new reserved field on the FormApi, something like rootError. One should have the possibility to get and set the value and it should be reset on a submission.

If I understand correctly, some API-related changes will soon allow to set field errors from the onSubmit callback. But this feature request is something different.

[depsimon]

Not sure if it has been added since your post, currently you can have an error that is bound to the form (not to a specific field).

// Set the errors
form.setErrorMap({
  onSubmit: formErrors.join(","),
});

// Show the errors
<p>{form.state.errors.join(', ')}</p>

[crutchcorn]

We've actually supported form-level errors for a LONG time. Anything set from useForm's validators will be attached to the form object, not fields

[johanfive]

I can create a ticket and I will if you still believe it's necessary after this last comment:

After some trial and error I realized we can achieve what I described earlier, by doing something like:

    onSubmit: ({ value: formData }) => {
      return createUser.mutateAsync(formData)
        .then(form.reset)
        .catch((non2xxApiResponse) => {
          // THIS works, but is this _the way_?
          form.setErrorMap({
            onSubmit: "Email already taken (or whatever)"
          });
        });
    },
    validators: {
        onSubmitAsync: async ({ value }) => {
            // do other kinds of "pre-flight" validations here
            // This is still an awesome feature
        }
    }

It works but I suspect it might not be a good idea to mess with the errorMap's onSubmit directly like that 🤔
You're the expert you tell us 😄

[crutchcorn]

That's fine to do so. I was thinking that we could even support setErrorMap with the fields property but after reconsidering probably not needed.

[johanfive]

@crutchcorn I mean it would actually be nice to have the option to do:

    onSubmit: ({ value: formData }) => {
        return createUser.mutateAsync(formData)
            .then(form.reset)
            .catch(() => {
                form.setErrorMap({
                    onSubmit: {
                        form: "Form submission failed",
                        fields: {
                            email: "Already taken"
                        }
                    }
                });
        });
    },
    validators: {
        onSubmitAsync: async ({ value }) => { ... }
    }

Especially since we can see that the type of state.errorMap.onSubmit is

(property) onSubmit?: string | false | {
    form?: ValidationError;
    fields: Partial<Record<string, ValidationError>>;
} | null | undefined

in a <form.Subscribe selector={(state) => [state.errorMap.onSubmit]}></form.Subscribe>

(An added benefit of all this is that if implemented and documented, you're then really encouraging people to think about their error handling)

[gregorbg]

I really want to second the idea expressed in the previous post by @johanfive. Such an API would be a blessing, because it seems that formApi.setErrorMap({ onSubmit: ... }) can only set one global error message and not field-level errors.

The argument about the return value of onSubmit already (effectively) allowing such a setter is very compelling to me, and it would tremendously help me in my codebase to adopt this wonderful library.

[johanfive]

@gregorbg I've opened a feature request here.

Feel free to upvote and tell your friends 😄