feat: added error display form util

formwerkjs · Aug 4, 2024 · b439d5e · b439d5e
1 parent c4f7f72
commit b439d5e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/packages/core/src/form/useForm.spec.ts b/packages/core/src/form/useForm.spec.ts
@@ -353,6 +353,17 @@ describe('validation', () => {
     expect(screen.getByTestId('form-err').textContent).toBe('Constraints not satisfied');
   });
 
+  test('displays errors if the field is touched', async () => {
+    const { setFieldTouched, displayError, setFieldErrors } = await renderSetup(() => {
+      return useForm();
+    });
+
+    setFieldErrors('test', 'error');
+    expect(displayError('test')).toBeUndefined();
+    setFieldTouched('test', true);
+    expect(displayError('test')).toBe('error');
+  });
+
   test('updates the form isValid', async () => {
     const input = ref<HTMLInputElement>();
 

diff --git a/packages/core/src/form/useForm.ts b/packages/core/src/form/useForm.ts
@@ -83,6 +83,10 @@ export function useForm<TForm extends FormObject = FormObject, TOutput extends F
     return ctx.getFieldErrors(path)[0];
   }
 
+  function displayError(path: Path<TForm>) {
+    return ctx.isFieldTouched(path) ? getError(path) : undefined;
+  }
+
   provide(FormKey, {
     ...ctx,
     ...transactionsManager,
@@ -103,6 +107,7 @@ export function useForm<TForm extends FormObject = FormObject, TOutput extends F
     setFieldErrors: ctx.setFieldErrors,
     setValues: ctx.setValues,
     getError,
+    displayError,
     ...actions,
   };
 }