[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

[Balastrong]

No, this example is the recommended way to set errors.

That onSubmit in your code is the function triggered after the form has been succesfully submitted. useForm has a validators object you can use to define functions, their return value will be automatically set into form (or fields) errors.

const form = useForm({
    defaultValues: {
      age: 0,
    },
   // Fired on successful submit
    onSubmit: async ({ value }) => {
      console.log(value)
    },
    validators: {
      // Add validators to the form the same way you would add them to a field
      onChange({ value }) {
        if (value.age < 13) {
          return 'Must be 13 or older to sign'
        }
        return undefined
      },
    },
})

More on the Form Validation docs

[bennettdams]

@Balastrong I think there is a misunderstanding? My use case is:
"All fields are valid, I submitted the form and use the valid fields to send a network request."
Imagine this network request is failing for whatever reason (maybe a failed validation on the backend).
When the error response is there, I want to set a "root" error for the form, as I can't assign this kind of error to a specific field.

[depsimon]

FYI we are having kind of the same discussion here: #1105

[Balastrong]

You can set a validators.onSubmitAsync function that does the network request and if something goes wrong it returns a string. That string will be automatically set as global form error.

You can see that in the example I linked at line 40, setting "invalid data" at form level.

Is that what you were looking for?

[bennettdams]

in the example I linked at line 40

Oh, that is perfect! I guess I was confused because the title says "Field errors", but this type of error is usually named "root error".

In my defense, I'm pretty sure this haven't existed yet when I created the discussion.

Thank you!