feat: add errors prop

[kotarella1110]

Related Issue

• 🖥️ Support Server Actions #11061

CSB

• https://codesandbox.io/s/react-hook-form-v7-ts-template-forked-vcgwf4
• https://codesandbox.io/p/sandbox/github/react-hook-form/react-hook-form/tree/experiment/trigger-submit-on-pass/examples/server-actions

Overview

This pull request introduces the addition of the errors prop, designed to dynamically respond to changes and update error states. This becomes particularly useful when your form needs to be synchronized with external states or server data. By incorporating this prop, you can seamlessly render error messages irrespective of JavaScript being enabled or disabled.

Benefits

Furthermore, this prop serves as a convenient syntax sugar, replacing the useEffect + setError combination with the more concise errors prop. Also it plays a crucial role in supporting Server Actions, allowing you to retrieve the errors returned by actions using react-dom's useFormState . By passing these errors as the errors prop, you seamlessly integrate Server Actions' errors with React Hook Form's error handling.

  import { useFormState } from 'react-dom';
  import { useForm } from 'react-hook-form';
  
  const [formState, action] = useFormState(myAction, null);
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    defaultValues: formState.values,
+   errors: formState.errors,
    progressive: true,
  });

This enhancement not only simplifies the codebase but also enhances the compatibility and cohesion between server-side and client-side error handling in React Hook Form.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[github-actions]

Size Change: +65 B (0%)

Total Size: 20.3 kB

Filename	Size	Change
dist/index.cjs.js	10.1 kB	+33 B (0%)
dist/index.umd.js	10.2 kB	+32 B (0%)

_{compressed-size-action}

[bluebill1049]

Awesome! thanks @kotarella1110

[RemyMachado]

It seems that the second codesandbox link is dead : https://codesandbox.io/p/sandbox/github/react-hook-form/react-hook-form/tree/experiment/trigger-submit-on-pass/examples/server-actions

[ErBlack]

Interesting. This version didn't work for my case.

All error paths for fieldsets and field arrays should be appended with .root. So, I decided to add .root to literally every error from the backend. And it works well with the setError function:

export const useExternalErrors = <T extends FieldValues>(
    setError: UseFormSetError<T>,
    errors?: FieldsValidationErrors<T>,
) => {
    useEffect(() => {
        if (!errors) return;

        Object.entries(errors).forEach(([name, message]) => {
            setError((name + '.root') as Path<T>, {
                message: message as string,
                type: 'backend',
            });
        });
    }, [setError, errors]);
};

So { 'name.root': {...} } displays near the name field when passed through setError and doesn't display when passed through the errors field.