feat: expose errorMessage prop on useField and Provider

logaretm · Apr 20, 2020 · 04eecaa · 04eecaa
1 parent a4184b0
commit 04eecaa
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/packages/core/src/Provider.ts b/packages/core/src/Provider.ts
@@ -64,13 +64,19 @@ export const ValidationProvider: any = {
   setup(props: ProviderProps, ctx: SetupContext) {
     const fieldName = ref(props.name || '');
     const $form = inject('$_veeObserver', undefined) as FormController | undefined;
-    const { errors, failedRules, value, validate: validateField, handleChange, onBlur, reset, ...flags } = useField(
-      fieldName,
-      props.rules,
-      {
+    const {
+      errors,
+      failedRules,
+      value,
+      errorMessage,
+      validate: validateField,
+      handleChange,
+      onBlur,
+      reset,
+      ...flags
+    } = useField(fieldName, props.rules, {
         form: $form,
-      }
-    );
+    });
 
     const resolvedRules = {};
 
@@ -107,7 +113,7 @@ export const ValidationProvider: any = {
         isRequired: isRequired.value,
         flags: unwrappedFlags.value,
         errors: errors.value,
-        error: errors.value[0],
+        errorMessage: errorMessage.value,
         failedRules: failedRules.value,
         validate: validateField,
         reset,

diff --git a/packages/core/src/useField.ts b/packages/core/src/useField.ts
@@ -61,12 +61,17 @@ export function useField(fieldName: MaybeReactive<string>, rules: RuleExpression
     });
   });
 
+  const errorMessage = computed(() => {
+    return errors.value[0];
+  });
+
   const field = {
     vid: fieldName,
     name: fieldName, // TODO: Custom field names
     value: value,
     ...flags,
     errors,
+    errorMessage,
     failedRules,
     reset,
     validate: validateField,
@@ -156,10 +161,10 @@ function useFormController(field: FieldComposite, rules: Ref<Record<string, any>
 
     dependencies.value.forEach(dep => {
       if (dep in form.values.value && field.validated.value) {
-          field.validate();
-        }
-      });
+        field.validate();
+      }
     });
+  });
 }
 
 function useFlags() {