How to implement Root Error with Form components

[billgun]

As the title said!
I tried to implement root error but I don't know how to display it, tried to console the data it show just fine
https://www.react-hook-form.com/api/useform/seterror/

[billgun]

I guess i asked too early i figured how to do it with
{form.formState.errors.root?.message}
But wondering perhaps there is cleaner way to do it?

[illustrofia]

Hey @billgun!

I extended my form.tsx.

Here's what I did:

const FormRootError = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => {
  const { errors } = useFormState()
  const rootError = errors.root
  if (!rootError) {
    return null
  }
  return (
    <p
      ref={ref}
      className={cn("text-destructive text-sm font-medium", className)}
      {...props}
    >
      {rootError.message}
    </p>
  )
})
FormRootError.displayName = "FormRootError"

I'll create a PR for this.

[illustrofia]

Here it is #3475 😄

[k8adev]

I modified the useFormField to handle root messages:

const useFormField = () => {
  const fieldContext = React.useContext(FormFieldContext);
  const itemContext = React.useContext(FormItemContext);
  const { getFieldState, formState } = useFormContext();

  const { error: fieldError, ...fieldState } = getFieldState(fieldContext.name, formState);

  if (!fieldContext) {
    throw new Error('useFormField should be used within <FormField>');
  }

  let error = fieldError?.root ?? fieldError;

  if (fieldError?.root) {
    const { root, ...errors } = fieldError;
    const hasErrors = Object.keys(errors).length > 0;

    if (!hasErrors) {
      error = undefined;
    }
  }

  const { id } = itemContext;

  return {
    id,
    error,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState
  };
}

It works well.