feat(form): removed empty fields from change and fix type warnings

Author: alvarosabu

dev/typescript/App.vue

@@ -53,10 +53,8 @@ import {
   EmailInput,
   FormValidation,
   PasswordInput,
-  TextAreaInput,
   CheckboxInput,
   RadioInput,
-  InputBase,
   email,
   pattern,
   ColorInput,

src/components/dynamic-form/DynamicForm.vue

@@ -51,6 +51,7 @@ import DynamicInput from '../dynamic-input/DynamicInput.vue';
 
 import { InputBase, FormControl } from '../../core/models';
 import { dynamicFormsSymbol } from '../../useApi';
+import { removeEmpty } from '../../core/utils/helpers';
 
 const props = {
   form: {
@@ -145,9 +146,9 @@ export default defineComponent({
       }
     });
 
-    function valueChange(changedValue: any) {
+    function valueChange(changedValue) {
       Object.assign(formValues, changedValue);
-      ctx.emit('changed', formValues);
+      ctx.emit('changed', removeEmpty(formValues));
     }
 
     function mapControls(empty?) {

src/core/models.ts

@@ -25,12 +25,18 @@ export type InputType =
   | UrlInput
   | CustomInput;
 
+type ValidationError = {
+  text: string;
+  // eslint-disable-next-line
+  value: any;
+};
+
 type ValidationErrors = {
-  [key: string]: any;
+  [key: string]: ValidationError;
 };
 
 interface ValidatorFn {
-  (control: FormControl<any> | undefined): ValidationErrors | null;
+  (control: FormControl | undefined): ValidationErrors | null;
 }
 
 export interface FormValidation {
@@ -39,7 +45,7 @@ export interface FormValidation {
 }
 
 export interface InputBase {
-  value: any;
+  value: boolean | string;
   name: string;
   label: string;
   disabled?: boolean;
@@ -53,10 +59,6 @@ export type TextInput = InputBase & {
   type: 'text';
 };
 
-/* export interface EmailInput extends InputBase<string> {
-  type: 'email';
-} */
-
 export type NumberInput = InputBase & {
   min?: number;
   max?: number;
@@ -65,7 +67,7 @@ export type NumberInput = InputBase & {
   type: 'number';
 };
 
-export type SelectInput<T = any> = InputBase & {
+export type SelectInput<T = boolean | string> = InputBase & {
   type: 'select';
   value: T;
   options?: { key: string; value: string; disabled?: boolean }[];

src/core/utils/helpers.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 export const { assign, entries, values, keys } = Object;
 
 export const slugify = (text: string): string =>
@@ -23,6 +24,17 @@ export const isEmpty = (entry: any) => {
   }
 };
 
+export const removeEmpty = obj =>
+  Object.keys(obj)
+    .filter(k => obj[k] != null) // Remove undef. and null.
+    .reduce(
+      (newObj, k) =>
+        typeof obj[k] === 'object'
+          ? { ...newObj, [k]: removeEmpty(obj[k]) } // Recurse.
+          : { ...newObj, [k]: obj[k] }, // Copy value.
+      {},
+    );
+
 export const mockAsync = (success, timeout, value) => {
   return new Promise((resolve, reject) => {
     setTimeout(() => {