feat: expose getError, getValue, getErrors on form groups

formwerkjs · Feb 7, 2025 · e873ea0 · e873ea0
1 parent 141e5fb
commit e873ea0
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 9 deletions.
diff --git a/.changeset/odd-eels-whisper.md b/.changeset/odd-eels-whisper.md
@@ -0,0 +1,5 @@
+---
+'@formwerk/core': patch
+---
+
+feat: expose getError, getValue, getErrors on form groups
diff --git a/packages/core/src/useFormGroup/useFormGroup.ts b/packages/core/src/useFormGroup/useFormGroup.ts
@@ -87,7 +87,7 @@ export function useFormGroup<TInput extends FormObject = FormObject, TOutput ext
     toValue(props.disableHtmlValidation) ?? form?.isHtmlValidationDisabled() ?? getConfig().disableHtmlValidation;
   const { validate, onValidationDispatch, defineValidationRequest, onValidationDone, dispatchValidateDone } =
     useValidationProvider({
-      getValues,
+      getValues: () => getValue(),
       getPath,
       schema: props.schema,
       type: 'GROUP',
@@ -132,24 +132,24 @@ export function useFormGroup<TInput extends FormObject = FormObject, TOutput ext
     );
   });
 
-  function getValues(): TInput {
-    return form?.getValue(getPath()) ?? {};
-  }
-
   function getErrors() {
     return form?.getErrors(getPath()) ?? [];
   }
 
+  function getValue(path?: string) {
+    return form?.getValue(prefixPath(path) ?? '');
+  }
+
   const isValid = computed(() => getErrors().length === 0);
   const isTouched = computed(() => form?.isTouched(getPath()) ?? false);
   const isDirty = computed(() => {
     const path = getPath();
 
-    return !isEqual(getValues(), form?.getFieldOriginalValue(path) ?? {});
+    return !isEqual(getValue(), form?.getFieldOriginalValue(path) ?? {});
   });
 
-  function getError(name: string) {
-    return form?.getErrors(prefixPath(name) ?? '')?.[0];
+  function getError(path: string) {
+    return form?.getErrors(prefixPath(path) ?? '')?.[0];
   }
 
   function displayError(name: string) {
@@ -228,5 +228,17 @@ export function useFormGroup<TInput extends FormObject = FormObject, TOutput ext
      * Validates the form group.
      */
     validate,
+    /**
+     * Gets the errors for the form group.
+     */
+    getErrors,
+    /**
+     * Gets the group's value, passing in a path will return the value of that field.
+     */
+    getValue,
+    /**
+     * Gets the error for a given field.
+     */
+    getError,
   };
 }
diff --git a/packages/playground/src/components/FormGroup.vue b/packages/playground/src/components/FormGroup.vue
@@ -15,6 +15,6 @@ import { FormGroupProps, useFormGroup } from '@formwerk/core';
 
 const props = defineProps<FormGroupProps>();
 
-const { labelProps, groupProps, getErrors, getError, displayError, getValues, isValid, isDirty, isTouched } =
+const { labelProps, groupProps, getErrors, getError, displayError, getValue, isValid, isDirty, isTouched } =
   useFormGroup(props);
 </script>