fix(validations): force validation and minor fixes

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,
@@ -85,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));
 
@@ -241,19 +244,26 @@ export default defineComponent({
 
     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 => {
@@ -277,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/styles/themes/default.scss

@@ -52,7 +52,6 @@ $input-error-color: #dc3545 !default;
 
 .form-group {
   display: flex;
-  width: 100%;
   flex-direction: column;
   margin-bottom: 1rem;