feat: allow validation schema to accept other expressions

logaretm · Jun 12, 2020 · ddeeaea · ddeeaea
1 parent e403731
commit ddeeaea
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 5 deletions.
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -73,7 +73,7 @@ export interface FieldComposite {
   errors: Ref<string[]>;
   errorMessage: Ref<string | undefined>;
   meta: Record<Flag, Ref<boolean>>;
-  __setRules(fn: GenericValidateFunction): void;
+  __setRules(fn: GenericValidateFunction | string | Record<string, any>): void;
 }
 
 export interface FormController {

diff --git a/packages/core/src/useField.ts b/packages/core/src/useField.ts
@@ -31,9 +31,9 @@ export function useField(
 ): FieldComposite {
   const { value, form, immediate, bails, disabled } = normalizeOptions(opts);
   const { meta, errors, failedRules, onBlur, handleChange, reset, patch } = useValidationState(value);
-  let schemaValidation: GenericValidateFunction;
+  let schemaValidation: GenericValidateFunction | string | Record<string, any>;
   const normalizedRules = computed(() => {
-    return schemaValidation || normalizeRules(unwrap(rules));
+    return normalizeRules(schemaValidation || unwrap(rules));
   });
 
   const runValidation = async (): Promise<ValidationResult> => {
@@ -79,7 +79,7 @@ export function useField(
     handleChange,
     onBlur,
     disabled,
-    __setRules(fn: GenericValidateFunction) {
+    __setRules(fn: GenericValidateFunction | string | Record<string, any>) {
       schemaValidation = fn;
     },
   };

diff --git a/packages/core/src/useForm.ts b/packages/core/src/useForm.ts
@@ -3,7 +3,7 @@ import { Flag, FormController, SubmissionHandler, GenericValidateFunction, Field
 import { unwrap } from './utils/refs';
 
 interface FormOptions {
-  validationSchema?: Record<string, GenericValidateFunction>;
+  validationSchema?: Record<string, GenericValidateFunction | string | Record<string, any>>;
   initialValues?: Record<string, any>;
 }
 

diff --git a/packages/core/tests/form.spec.ts b/packages/core/tests/form.spec.ts
@@ -244,4 +244,39 @@ describe('<Form />', () => {
 
     expect(submitMock).toHaveBeenCalledTimes(1);
   });
+
+  test('validation schema to validate form', async () => {
+    const wrapper = mountWithHoc({
+      setup() {
+        const schema = {
+          field: 'required',
+          other: 'required',
+        };
+
+        return {
+          schema,
+        };
+      },
+      template: `
+      <VForm @submit="submit" as="form" :validationSchema="schema" v-slot="{ errors }">
+        <Field name="field" as="input" />
+        <span id="field">{{ errors.field }}</span>
+        
+        <Field name="other" as="input" />
+        <span id="other">{{ errors.other }}</span>
+
+        <button>Validate</button>
+      </VForm>
+    `,
+    });
+
+    const first = wrapper.$el.querySelector('#field');
+    const second = wrapper.$el.querySelector('#other');
+
+    wrapper.$el.querySelector('button').click();
+    await flushPromises();
+
+    expect(first.textContent).toBe(REQUIRED_MESSAGE);
+    expect(second.textContent).toBe(REQUIRED_MESSAGE);
+  });
 });