TypeScript: How to set a Form Error that is not associated with a Field?

[thomasdax98]

I've implemented a form that submits its data to an API. If an error occurs in the API, the error is returned. This error is not associated with any field.

I want to show the error using setError(). According to the example here (https://github.com/react-hook-form/react-hook-form/blob/master/src/types/form.ts#L517) it should be possible to add an error like this: setError("serverError", { type: "server", message: "Error occurred"}).
However the type definition of setError prevents this because it only allows a FieldValue as name (name: FieldPath<TFieldValues>).

Here is an excerpt of my code:

interface SignUpFormValues {
  name: string;
  email: string;
  password: string;
  passwordConfirmation: string;
}

const {
    register,
    handleSubmit,
    formState: { errors },
    setError,
  } = useForm<SignUpFormValues>({
    resolver: yupResolver(schema),
  });

const onSubmit = async (data: SignUpFormValues) => {
    await authApi.register({
      ...data,
      setErrors: (errors) => {
        setError("serverError", { type: "server", message: "An error occurred." }); // type error in this line
        // Error: Argument of type 'string' is not assignable to parameter of type '"passwordConfirmation" | "name" | "email" | "password"'.
      },
    });
  };

How can I use "serverError" as name without triggering a type error? Is this a bug in the type definitions?

[Moshyfawn]

RHF doesn't support gloabal error field ATM.
See #7761 for some context.
If you wanna see the global error field in RHF, vote for the feature in #7661

[suarezph]

There is another solution to this. Please see #8192

[msheakoski]

It is explained how to accomplish this at the 5:50 mark in this video by Bill (RHF author):

This is the pattern that I use based on the video:

const schema = z.object({
  name: z.string(),
  email: z.string().email(),

  // This is just to make the "field" available in TypeScript. It will never
  // have a value assigned to it and JSON.stringify will filter it out.
  // The TypeScript type resolves to: void | undefined
  serverError: z.void(),
})

function MyComponent(props) {
  const {
    formState: { errors, isSubmitting, isSubmitSuccessful },
    handleSubmit,
    register,
    setError,
  } = useForm<z.output<typeof schema>>({
    resolver: zodResolver(schema),
  })

  return (
    <form
      onSubmit={(event) =>
        handleSubmit(async (values) => {
          const result = await doMySignupApiCall(values)
          if (result.userErrors.length > 0) {
            // Display errors for individual fields where remote validations fail
            for (const userError of result.userErrors) {
              setError(userError.field, { message: userError.message })
            }
            return
          }
          // Do stuff here with the successful result like trigger callbacks, etc
          props.onSubmitSuccessful?.()
        })(event).catch((error) => {
          // If the request fails due to network error or something that does not apply to a single field
          setError("serverError", { type: "server", message: error?.message })
        })
      }
    >
      {!isSubmitSuccessful ? (
        <>
          <div>
            <input {...register("name")} />
            <ErrorMessage name="name" errors={errors} />
          </div>
          <div>
            <input type="email" {...register("email")} />
            <ErrorMessage name="email" errors={errors} />
          </div>
          <div>
            <button disabled={isSubmitting}>Sign up</button>
          </div>
          {errors.serverError && (
            <p>An unexpected error has occurred. Please try again later.</p>
          )}
        </>
      ) : (
        <p>Thank you for signing up!</p>
      )}
    </form>
  )
}

[viniciusvasti]

Thanks for that answer. It helped me, although I did it differently.
Instead of poluting zod schema (which in my project is already attached to another domain type/model), I did a union of zod schem type when instantiating the forma. Like this:

useForm<z.infer<typeof schema> &
  { serverError: string }
>({
    resolver: zodResolver(schema),
})

[blakewats]

Thanks @viniciusvasti - I like this solution, as it remains purely within Typescript and does not change the functional code. Nice work, thank you.

[maurer2]

Hello, I believe one could also create a generic helper and make it reusable, e.g.

type WithServerError<T> = T & { root: { serverError: string } };
type FormValues = z.infer<typeof schema>;

useForm<WithServerError<FormValues>>({
    resolver: zodResolver(schema),
})

Cheers