fix(validation): changed min, max length params and FieldControl factory

Author: alvarosabu

src/components/dynamic-form/DynamicForm.vue

@@ -61,6 +61,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 +74,6 @@ const components = {
   DynamicInput,
 };
 
-const EMPTY_CONTROL = {
-  dirty: false,
-  touched: false,
-  valid: true,
-};
-
 /* const AVAILABLE_THEMES = ['default', 'material'];
  */
 export default defineComponent({
@@ -168,17 +163,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,41 +218,22 @@ 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;
+            }
           });
         }
       });

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,