feat: add errors prop

reports/api-extractor.md

@@ -60,6 +60,7 @@ export type Control<TFieldValues extends FieldValues = FieldValues, TContext = a
     _getWatch: WatchInternal<TFieldValues>;
     _updateFieldArray: BatchFieldArrayUpdate;
     _getFieldArray: <TFieldArrayValues>(name: InternalFieldName) => Partial<TFieldArrayValues>[];
+    _setErrors: (errors: FieldErrors<TFieldValues>) => void;
     _updateDisabledField: (props: {
         disabled?: boolean;
         name: FieldName<any>;
@@ -676,6 +677,7 @@ export type UseFormProps<TFieldValues extends FieldValues = FieldValues, TContex
     reValidateMode: Exclude<Mode, 'onTouched' | 'all'>;
     defaultValues: DefaultValues<TFieldValues> | AsyncDefaultValues<TFieldValues>;
     values: TFieldValues;
+    errors: FieldErrors<TFieldValues>;
     resetOptions: Parameters<UseFormReset<TFieldValues>>[1];
     resolver: Resolver<TFieldValues, TContext>;
     context: TContext;
@@ -861,7 +863,7 @@ export type WatchObserver<TFieldValues extends FieldValues> = (value: DeepPartia
 
 // Warnings were encountered during analysis:
 //
-// src/types/form.ts:439:3 - (ae-forgotten-export) The symbol "Subscription" needs to be exported by the entry point index.d.ts
+// src/types/form.ts:440:3 - (ae-forgotten-export) The symbol "Subscription" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

src/__tests__/useForm.server.test.tsx

@@ -25,6 +25,32 @@ describe('useForm with SSR', () => {
     expect(spy).not.toHaveBeenCalled();
   });
 
+  it('should display error with errors prop', () => {
+    const App = () => {
+      const {
+        register,
+        formState: { errors },
+      } = useForm<{
+        test: string;
+      }>({
+        errors: {
+          test: { type: 'test', message: 'test error' },
+        },
+      });
+
+      return (
+        <div>
+          <input {...register('test')} />
+          <span role="alert">{errors.test && errors.test.message}</span>
+        </div>
+      );
+    };
+
+    expect(renderToString(<App />)).toEqual(
+      '<div><input name="test"/><span role="alert">test error</span></div>',
+    );
+  });
+
   it('should not pass down constrained API for server side rendering', () => {
     const App = () => {
       const { register } = useForm<{

src/__tests__/useForm.test.tsx

@@ -12,6 +12,7 @@ import { act, renderHook } from '@testing-library/react-hooks';
 import { VALIDATION_MODE } from '../constants';
 import {
   Control,
+  FieldErrors,
   RegisterOptions,
   UseFormRegister,
   UseFormReturn,
@@ -551,6 +552,55 @@ describe('useForm', () => {
 
       await waitFor(() => expect(span.textContent).toBe('data'));
     });
+
+    it('should display the latest error message with errors prop', () => {
+      const Form = () => {
+        type FormValues = {
+          test1: string;
+          test2: string;
+        };
+        const [errorsState, setErrorsState] = React.useState<
+          FieldErrors<FormValues>
+        >({
+          test1: { type: 'test1', message: 'test1 error' },
+        });
+        const {
+          register,
+          formState: { errors },
+        } = useForm<FormValues>({
+          errors: errorsState,
+        });
+
+        return (
+          <div>
+            <input {...register('test1')} type="text" />
+            <span role="alert">{errors.test1 && errors.test1.message}</span>
+            <input {...register('test2')} type="text" />
+            <span role="alert">{errors.test2 && errors.test2.message}</span>
+            <button
+              onClick={() =>
+                setErrorsState((errors) => ({
+                  ...errors,
+                  test2: { type: 'test2', message: 'test2 error' },
+                }))
+              }
+            >
+              Set Errors
+            </button>
+          </div>
+        );
+      };
+
+      render(<Form />);
+
+      const alert1 = screen.getAllByRole('alert')[0];
+      expect(alert1.textContent).toBe('test1 error');
+
+      fireEvent.click(screen.getByRole('button'));
+
+      const alert2 = screen.getAllByRole('alert')[1];
+      expect(alert2.textContent).toBe('test2 error');
+    });
   });
 
   describe('handleChangeRef', () => {

src/logic/createFormControl.ts

@@ -8,6 +8,7 @@ import {
   EventType,
   Field,
   FieldError,
+  FieldErrors,
   FieldNamesMarkedBoolean,
   FieldPath,
   FieldRefs,
@@ -45,6 +46,7 @@ import compact from '../utils/compact';
 import convertToArrayPayload from '../utils/convertToArrayPayload';
 import createSubject from '../utils/createSubject';
 import deepEqual from '../utils/deepEqual';
+import { deepMerge } from '../utils/deepMerge';
 import get from '../utils/get';
 import isBoolean from '../utils/isBoolean';
 import isCheckBoxInput from '../utils/isCheckBoxInput';
@@ -111,7 +113,7 @@ export function createFormControl<
     isValid: false,
     touchedFields: {},
     dirtyFields: {},
-    errors: {},
+    errors: isObject(_options.errors) ? _options.errors || {} : {},
     disabled: false,
   };
   let _fields: FieldRefs = {};
@@ -246,6 +248,14 @@ export function createFormControl<
     });
   };
 
+  const _setErrors = (errors: FieldErrors<TFieldValues>) => {
+    deepMerge(_formState.errors, errors);
+    _subjects.state.next({
+      errors: _formState.errors,
+      isValid: false,
+    });
+  };
+
   const updateValidAndValue = (
     name: InternalFieldName,
     shouldSkipSetValueAs: boolean,
@@ -1330,6 +1340,7 @@ export function createFormControl<
       _disableForm,
       _subjects,
       _proxyFormState,
+      _setErrors,
       get _fields() {
         return _fields;
       },

src/types/form.ts

@@ -113,6 +113,7 @@ export type UseFormProps<
   reValidateMode: Exclude<Mode, 'onTouched' | 'all'>;
   defaultValues: DefaultValues<TFieldValues> | AsyncDefaultValues<TFieldValues>;
   values: TFieldValues;
+  errors: FieldErrors<TFieldValues>;
   resetOptions: Parameters<UseFormReset<TFieldValues>>[1];
   resolver: Resolver<TFieldValues, TContext>;
   context: TContext;
@@ -785,6 +786,7 @@ export type Control<
   _getFieldArray: <TFieldArrayValues>(
     name: InternalFieldName,
   ) => Partial<TFieldArrayValues>[];
+  _setErrors: (errors: FieldErrors<TFieldValues>) => void;
   _updateDisabledField: (
     props: {
       disabled?: boolean;

src/useForm.ts

@@ -5,6 +5,7 @@ import getProxyFormState from './logic/getProxyFormState';
 import shouldRenderFormState from './logic/shouldRenderFormState';
 import deepEqual from './utils/deepEqual';
 import isFunction from './utils/isFunction';
+import isObject from './utils/isObject';
 import {
   FieldValues,
   FormState,
@@ -65,7 +66,7 @@ export function useForm<
     submitCount: 0,
     dirtyFields: {},
     touchedFields: {},
-    errors: {},
+    errors: isObject(props.errors) ? props.errors || {} : {},
     disabled: false,
     defaultValues: isFunction(props.defaultValues)
       ? undefined
@@ -127,6 +128,12 @@ export function useForm<
     }
   }, [props.values, control]);
 
+  React.useEffect(() => {
+    if (props.errors) {
+      control._setErrors(props.errors);
+    }
+  }, [props.errors, control]);
+
   React.useEffect(() => {
     if (!control._state.mount) {
       control._updateValid();