Merge pull request #204 from asigloo/bugfix/validators-errors

Bugfix/validators errors

Author: alvarosabu

dev/typescript/App.vue

@@ -10,7 +10,7 @@
             <h1 class="title mb-16 text-bg">{{ title }}</h1>
             <dynamic-form
               :form="form"
-              @submited="handleSubmit"
+              @submitted="handleSubmit"
               @change="valueChanged"
               @error="handleError"
             >
@@ -34,7 +34,7 @@
               </template>
             </dynamic-form>
             <button
-              class="btn bg-teal-500 text-white hover:bg-teal-700 mt-4"
+              class="btn bg-green-500 text-white hover:bg-green-700 mt-4"
               submit="true"
               :form="form?.id"
             >

src/components/checkbox-input/CheckboxInput.vue

@@ -6,6 +6,10 @@ import { useInputValidation } from '@/composables/use-validation';
 
 const props = {
   control: Object as PropType<FormControl<CheckboxInput>>,
+  forceValidation: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export default defineComponent({

src/components/dynamic-form/DynamicForm.vue

@@ -12,6 +12,7 @@
       :key="control.name"
       :control="control"
       :submited="submited"
+      :forceValidation="forceValidation"
       @change="valueChange"
       @blur="onBlur"
       @validate="onValidate"
@@ -36,6 +37,8 @@
 </template>
 
 <script lang="ts">
+import { nextTick } from 'vue';
+
 import {
   defineComponent,
   PropType,
@@ -61,6 +64,7 @@ import {
 } from '@/core/models';
 import { dynamicFormsSymbol } from '@/useApi';
 import { deepClone, hasValue, removeEmpty } from '@/core/utils/helpers';
+import { FieldControl } from '@/core/factories';
 
 const props = {
   form: {
@@ -73,12 +77,6 @@ const components = {
   DynamicInput,
 };
 
-const EMPTY_CONTROL = {
-  dirty: false,
-  touched: false,
-  valid: true,
-};
-
 /* const AVAILABLE_THEMES = ['default', 'material'];
  */
 export default defineComponent({
@@ -90,7 +88,7 @@ export default defineComponent({
     const cache = deepClone(toRaw(props.form.fields));
 
     const controls: Ref<FormControl<InputType>[]> = ref([]);
-    const submited = ref(false);
+    const forceValidation = ref(false);
 
     const deNormalizedScopedSlots = computed(() => Object.keys(ctx.slots));
 
@@ -168,17 +166,15 @@ export default defineComponent({
         Object.entries(props.form?.fields).map(
           ([key, field]: [string, InputType]) =>
             empty
-              ? ({
+              ? FieldControl({
                   ...field,
                   name: key,
                   value: null,
-                  ...EMPTY_CONTROL,
-                } as FormControl<InputType>)
-              : ({
+                })
+              : FieldControl({
                   ...field,
                   name: key,
-                  ...EMPTY_CONTROL,
-                } as FormControl<InputType>),
+                }),
         ) || [];
       if (props.form.fieldOrder) {
         controls.value = controlArray.sort(
@@ -225,61 +221,49 @@ export default defineComponent({
       }
     }
 
-    /*     function validateControl(control: FormControl<InputType>) {
-      if (control.validations) {
-        const validation = control.validations.reduce((prev, curr) => {
-          const val =
-            typeof curr.validator === 'function'
-              ? curr.validator(control)
-              : null;
-          if (val !== null) {
-            const [key, value] = Object.entries(val)[0];
-            const obj = {};
-            obj[key] = {
-              value,
-              text: curr.text,
-            };
-            return {
-              ...prev,
-              ...obj,
-            };
-          }
-          return {
-            ...prev,
-          };
-        }, {});
-        control.errors = validation;
-        control.valid = Object.keys(validation).length === 0;
-      }
-    } */
-
     function detectChanges(fields) {
       const changes = diff(cache, deepClone(fields));
       Object.entries(changes).forEach(([key, value]) => {
         let ctrl = findControlByName(key);
         if (ctrl) {
           Object.entries(value).forEach(([change, newValue]) => {
-            ctrl[change] = newValue;
+            if (change === 'options' || change === 'validations') {
+              Object.entries(newValue).forEach(([optKey, optValue]) => {
+                ctrl[change][optKey] = {
+                  ...ctrl[change][optKey],
+                  ...optValue,
+                };
+              });
+            } else {
+              ctrl[change] = newValue;
+            }
           });
         }
       });
     }
 
     function resetForm() {
       mapControls(true);
+      forceValidation.value = false;
     }
 
-    function handleSubmit() {
-      submited.value = true;
+    async function handleSubmit() {
+      validateAll();
+
+      await nextTick();
 
       if (isValid.value) {
-        ctx.emit('submited', formValues);
+        ctx.emit('submitted', formValues);
         resetForm();
       } else {
         ctx.emit('error', formValues);
       }
     }
 
+    function validateAll() {
+      forceValidation.value = true;
+    }
+
     watch(
       () => props.form.fields,
       fields => {
@@ -303,10 +287,11 @@ export default defineComponent({
       errors,
       deNormalizedScopedSlots,
       normalizedControls,
-      submited,
       formattedOptions,
       onBlur,
       onValidate,
+      forceValidation,
+      validateAll,
     };
   },
 });

src/components/dynamic-input/DynamicInput.vue

@@ -28,9 +28,8 @@ import {
   InputEvent,
 } from '@/core/models';
 
-import { values, isArray, isObject } from '@/core/utils/helpers';
+import { isArray, isObject } from '@/core/utils/helpers';
 import { useInputEvents } from '@/composables/input-events';
-import { dynamicFormsSymbol } from '@/useApi';
 
 const components = {
   TextInputComponent,
@@ -46,9 +45,9 @@ const props = {
     type: Object as PropType<FormControl<InputType>>,
     required: true,
   },
-  submited: {
+  forceValidation: {
     type: Boolean,
-    required: true,
+    default: false,
   },
 };
 
@@ -65,7 +64,6 @@ export default defineComponent({
   props,
   setup(props, { emit, slots }) {
     const { onFocus, onBlur } = useInputEvents(props?.control, emit);
-    const { options } = inject(dynamicFormsSymbol);
 
     let component;
 
@@ -78,6 +76,7 @@ export default defineComponent({
         onFocus: (e: InputEvent) => emit('focus', e),
         onValidate: (validation: ValidationEvent) =>
           emit('validate', validation),
+        forceValidation: props.forceValidation,
       };
     });
 
@@ -105,18 +104,6 @@ export default defineComponent({
       return [classes, props?.control?.customClass];
     });
 
-    const autoValidate = computed(
-      () => props?.control?.touched && options?.autoValidate,
-    );
-
-    const errorMessages = computed(() => {
-      const errors = values(props?.control?.errors || {});
-      if (errors.length > 0 && (props.submited || autoValidate.value)) {
-        return errors.map(value => value.text);
-      }
-      return [];
-    });
-
     function valueChange($event) {
       emit('change', $event);
     }

src/components/number-input/NumberInput.vue

@@ -6,6 +6,10 @@ import { useInputValidation } from '@/composables/use-validation';
 
 const props = {
   control: Object as PropType<FormControl<NumberInput>>,
+  forceValidation: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export default defineComponent({

src/components/radio-input/RadioInput.vue

@@ -6,6 +6,10 @@ import { useInputValidation } from '@/composables/use-validation';
 
 const props = {
   control: Object as PropType<FormControl<RadioInput>>,
+  forceValidation: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export default defineComponent({

src/components/select-input/SelectInput.vue

@@ -7,6 +7,10 @@ import { useInputValidation } from '@/composables/use-validation';
 
 const props = {
   control: Object as PropType<FormControl<SelectInput>>,
+  forceValidation: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export default defineComponent({

src/components/text-area-input/TextAreaInput.vue

@@ -5,6 +5,10 @@ import { useInputEvents } from '@/composables/input-events';
 import { useInputValidation } from '@/composables/use-validation';
 const props = {
   control: Object as PropType<FormControl<TextAreaInput>>,
+  forceValidation: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export default defineComponent({

src/components/text-input/TextInput.vue

@@ -15,6 +15,10 @@ const props = {
   control: Object as PropType<
     FormControl<TextInput | EmailInput | PasswordInput | UrlInput | ColorInput>
   >,
+  forceValidation: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export default defineComponent({

src/composables/use-validation.ts

@@ -2,10 +2,11 @@
 
 import { ErrorMessage } from '@/core/models';
 import {  removeEmpty } from '@/core/utils/helpers';
-import { computed,  ref } from 'vue';
+import { computed,  ref, watch } from 'vue';
 
 export function useInputValidation(props: any, emit: any) {
   const isPendingValidation = ref(false);
+
   const isRequired = computed(() => {
     return props.control.validations.some(
       validation => validation.type === 'required',
@@ -16,9 +17,9 @@ export function useInputValidation(props: any, emit: any) {
     return props.control.validations.length > 0;
   });
 
-  async function validate(): Promise<void> {
+  async function validate(force = false): Promise<void> {
     if (
-      (props.control.touched || props.control.dirty) &&
+      force || (props.control.touched || props.control.dirty) &&
       requiresValidation.value
     ) {
       let errors = {};
@@ -36,10 +37,6 @@ export function useInputValidation(props: any, emit: any) {
         }
       });
 
-      console.log({
-        sync: syncValidations,
-        async: asyncValidations,
-      });
       if(asyncValidations.length > 0) {
         isPendingValidation.value = true;
 
@@ -112,6 +109,15 @@ export function useInputValidation(props: any, emit: any) {
     ];
   });
 
+  watch(
+    () => props.forceValidation,
+    value => {
+      if(value) {
+        validate(value)
+      }
+    },
+  );
+
   return {
     isPendingValidation,
     validate,

src/core/factories.ts

@@ -149,7 +149,7 @@ export const FieldControl = ({
   type,
   ...rest
 }: Partial<FormControl<any>>): FormControl<any> => ({
-  ...FieldBase(rest),
+  ...rest,
   name,
   type,
   ...EMPTY_CONTROL,

src/core/utils/validators.ts

@@ -47,7 +47,7 @@ export const url = (value: string): ValidationErrors => {
 };
 
 export const minLength = (minLength: number) => (
-  value: number,
+  value: string,
 ): ValidationErrors => {
   if (isEmptyInputValue(value)) {
     return { minLength: null }; // don't validate empty values to allow optional controls
@@ -63,14 +63,14 @@ export const minLength = (minLength: number) => (
 };
 
 export const maxLength = (maxLength: number) => (
-  value: number,
+  value: string,
 ): ValidationErrors => {
   if (isEmptyInputValue(value)) {
-    return null; // don't validate empty values to allow optional controls
+    return { maxLength: null }; // don't validate empty values to allow optional controls
   }
   const length = value ? `${value}`.length : 0;
   return {
-    maxlength:
+    maxLength:
       length > maxLength
         ? { requiredLength: maxLength, actualLength: length }
         : null,