From f6205a9f28d4d7b02ee5343372d228c0d5a6ead2 Mon Sep 17 00:00:00 2001
From: Alvaro <alvaro.saburido@gmail.com>
Date: Fri, 24 Sep 2021 15:36:06 +0200
Subject: [PATCH 1/3] feat: expose resetForm on form ref

---
 demos/vue-3/src/components/Console.vue      |  14 +-
 demos/vue-3/src/router/index.ts             |  19 +-
 demos/vue-3/src/views/Basic.vue             |  20 +-
 demos/vue-3/src/views/Home.vue              |  39 ++--
 demos/vue-3/src/views/ResetForm.vue         | 135 ++++++++++++++
 src/components/dynamic-form/DynamicForm.vue |  28 +--
 src/composables/useDynamicForm.ts           | 191 ++++++++++----------
 7 files changed, 302 insertions(+), 144 deletions(-)
 create mode 100644 demos/vue-3/src/views/ResetForm.vue

diff --git a/demos/vue-3/src/components/Console.vue b/demos/vue-3/src/components/Console.vue
index 9ff2164..51b7872 100644
--- a/demos/vue-3/src/components/Console.vue
+++ b/demos/vue-3/src/components/Console.vue
@@ -12,20 +12,22 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, watch } from 'vue'
 
 const props = {
-  content: String,
-};
+  content: Object,
+}
 
 export default defineComponent({
   name: 'console',
   props,
   setup(props) {
-    const jsonValues = computed(() => JSON.stringify(props.content));
+    const jsonValues = computed(() => JSON.stringify(props.content))
+
+    watch(props.content, () => {})
     return {
       jsonValues,
-    };
+    }
   },
-});
+})
 </script>
diff --git a/demos/vue-3/src/router/index.ts b/demos/vue-3/src/router/index.ts
index 5c4c39f..d20c53d 100644
--- a/demos/vue-3/src/router/index.ts
+++ b/demos/vue-3/src/router/index.ts
@@ -1,5 +1,5 @@
-import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
-import Home from '../views/Home.vue';
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+import Home from '../views/Home.vue'
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -114,11 +114,20 @@ const routes: Array<RouteRecordRaw> = [
         /* webpackChunkName: "reset-after-submit" */ '../views/ResetAfterSubmit.vue'
       ),
   },
-];
+  {
+    path: '/reset-form',
+    name: 'Reset Form Manually',
+    meta: {
+      title: 'Reset Form Manually',
+    },
+    component: () =>
+      import(/* webpackChunkName: "reset-form" */ '../views/ResetForm.vue'),
+  },
+]
 
 const router = createRouter({
   history: createWebHistory(),
   routes,
-});
+})
 
-export default router;
+export default router
diff --git a/demos/vue-3/src/views/Basic.vue b/demos/vue-3/src/views/Basic.vue
index 6f971ce..da8ba5c 100644
--- a/demos/vue-3/src/views/Basic.vue
+++ b/demos/vue-3/src/views/Basic.vue
@@ -1,11 +1,11 @@
 <script lang="ts">
-import { CheckboxField, TextField, SelectField } from '/@/';
-import { computed, defineComponent, reactive } from 'vue';
+import { CheckboxField, TextField, SelectField } from '/@/'
+import { computed, defineComponent, reactive } from 'vue'
 
 export default defineComponent({
   name: 'BasicDemo',
   setup() {
-    const formValues = reactive({});
+    const formValues = reactive({})
 
     const form = computed(() => ({
       id: 'basic-demo',
@@ -34,19 +34,19 @@ export default defineComponent({
           label: 'Remember Me',
         }),
       },
-    }));
+    }))
 
     function handleSubmit(values) {
-      console.log('Values Submitted', values);
+      console.log('Values Submitted', values)
     }
 
     function valueChanged(values) {
-      Object.assign(formValues, values);
-      console.log('Values', values);
+      Object.assign(formValues, values)
+      console.log('Values', values)
     }
 
     function handleError(errors) {
-      console.error('Errors', errors);
+      console.error('Errors', errors)
     }
 
     return {
@@ -55,9 +55,9 @@ export default defineComponent({
       handleSubmit,
       valueChanged,
       handleError,
-    };
+    }
   },
-});
+})
 </script>
 <template>
   <div class="page container">
diff --git a/demos/vue-3/src/views/Home.vue b/demos/vue-3/src/views/Home.vue
index 55d1e2a..8971ca6 100644
--- a/demos/vue-3/src/views/Home.vue
+++ b/demos/vue-3/src/views/Home.vue
@@ -1,12 +1,12 @@
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent, ref } from 'vue'
 
-const STAGGER_DELAY = 200;
+const STAGGER_DELAY = 200
 
 export default defineComponent({
   name: 'Home',
   setup() {
-    const demos = ref([]);
+    const demos = ref([])
     const colorsMap = ref({
       'text-field': 'yellow',
       'email-field': 'blue',
@@ -18,7 +18,7 @@ export default defineComponent({
       'custom-field': 'indigo',
       'radio-field': 'yellow',
       'checkbox-field': 'blue',
-    });
+    })
 
     setTimeout(() => {
       demos.value = [
@@ -84,26 +84,31 @@ export default defineComponent({
             route: '/reset-after-submit',
             tags: ['submit', 'reset-forms'],
           },
+          {
+            name: 'Reset form',
+            route: '/reset-form',
+            tags: ['reset-forms'],
+          },
         ],
-      ];
-    }, 1000);
+      ]
+    }, 1000)
 
     function beforeEnter(el) {
-      el.style.visibility = 'hidden';
+      el.style.visibility = 'hidden'
     }
     function enter(el) {
-      const delay = el.dataset.index * STAGGER_DELAY;
+      const delay = el.dataset.index * STAGGER_DELAY
       setTimeout(() => {
-        el.classList.add('animate__animated', 'animate__fadeIn');
-        el.style.visibility = 'visible';
-      }, delay);
+        el.classList.add('animate__animated', 'animate__fadeIn')
+        el.style.visibility = 'visible'
+      }, delay)
     }
     function leave(el) {
-      const delay = el.dataset.index * STAGGER_DELAY;
+      const delay = el.dataset.index * STAGGER_DELAY
       setTimeout(() => {
-        el.classList.add('animate__animated', 'animate__fadeOut');
-        el.style.visibility = 'hidden';
-      }, delay);
+        el.classList.add('animate__animated', 'animate__fadeOut')
+        el.style.visibility = 'hidden'
+      }, delay)
     }
 
     return {
@@ -112,9 +117,9 @@ export default defineComponent({
       enter,
       leave,
       colorsMap,
-    };
+    }
   },
-});
+})
 </script>
 
 <template>
diff --git a/demos/vue-3/src/views/ResetForm.vue b/demos/vue-3/src/views/ResetForm.vue
new file mode 100644
index 0000000..6e85472
--- /dev/null
+++ b/demos/vue-3/src/views/ResetForm.vue
@@ -0,0 +1,135 @@
+<script lang="ts">
+import {
+  CheckboxField,
+  FormValidator,
+  Validator,
+  email,
+  pattern,
+  EmailField,
+  required,
+  PasswordField,
+} from '/@/'
+import { computed, defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  name: 'ResetFormDemo',
+  setup() {
+    const formValues = ref({})
+    const formRef = ref(null)
+
+    const emailValidator: FormValidator = Validator({
+      validator: email,
+      text: 'Email format is incorrect',
+    })
+
+    const passwordValidator: FormValidator = Validator({
+      validator: pattern(
+        '^(?=.*[a-z])(?=.*[A-Z])(?=.*)(?=.*[#$^+=!*()@%&]).{8,10}$',
+      ),
+      text: 'Password must contain at least 1 Uppercase, 1 Lowercase, 1 number, 1 special character and min 8 characters max 10',
+    })
+
+    const form = computed(() => ({
+      id: 'basic-demo',
+      fields: {
+        email: EmailField({
+          label: 'Email',
+          validations: [
+            Validator({ validator: required, text: 'This field is required' }),
+            emailValidator,
+          ],
+        }),
+        password: PasswordField({
+          label: 'Password',
+          autocomplete: 'current-password',
+          validations: [
+            Validator({ validator: required, text: 'This field is required' }),
+            passwordValidator,
+          ],
+        }),
+        rememberMe: CheckboxField({
+          label: 'Remember Me',
+        }),
+      },
+    }))
+
+    function handleSubmit(values) {
+      console.log('Values Submitted', values)
+    }
+
+    function valueChanged(values) {
+      Object.assign(formValues.value, values)
+      console.log('Values', values)
+    }
+
+    function handleError(errors) {
+      console.error('Errors', errors)
+    }
+
+    function resetForm() {
+      formRef.value.resetForm()
+      formValues.value = {}
+    }
+
+    return {
+      form,
+      handleSubmit,
+      formValues,
+      valueChanged,
+      handleError,
+      formRef,
+      resetForm,
+    }
+  },
+})
+</script>
+<template>
+  <div class="page container">
+    <div class="mx-auto w-full sm:w-1/2 relative mb-24">
+      <div
+        class="
+          absolute
+          inset-0
+          bg-gradient-to-r
+          from-blue-400
+          to-green-200
+          shadow-xl
+          transform
+          -skew-y-3
+          sm:skew-y-0 sm:-rotate-3 sm:rounded-3xl
+        "
+      ></div>
+      <div class="relative card p-6 bg-white">
+        <DynamicForm
+          ref="formRef"
+          :form="form"
+          @submitted="handleSubmit"
+          @change="valueChanged"
+          @error="handleError"
+        />
+        <button
+          data-cy="submit"
+          class="btn mr-4 bg-green-500 text-white hover:bg-green-700 mt-4"
+          submit="true"
+          :form="form?.id"
+        >
+          Try me
+        </button>
+
+        <button
+          class="btn bg-green-500 text-white hover:bg-green-700 mt-4"
+          @click="resetForm"
+        >
+          Reset Me
+        </button>
+      </div>
+    </div>
+    <div class="mx-auto w-full sm:w-1/2">
+      <Console :content="formValues" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import '/@/styles/themes/default.scss';
+</style>
diff --git a/src/components/dynamic-form/DynamicForm.vue b/src/components/dynamic-form/DynamicForm.vue
index 8258280..e7d708d 100644
--- a/src/components/dynamic-form/DynamicForm.vue
+++ b/src/components/dynamic-form/DynamicForm.vue
@@ -36,16 +36,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, watch } from 'vue';
-import { useDynamicForms, DynamicForm } from '/@/index';
-import { useDynamicForm } from '/@/composables/useDynamicForm';
+import { defineComponent, PropType, watch } from 'vue'
+import { useDynamicForms, DynamicForm } from '/@/index'
+import { useDynamicForm } from '/@/composables/useDynamicForm'
 
 const props = {
   form: {
     type: Object as PropType<DynamicForm>,
     required: true,
   },
-};
+}
 
 /* const AVAILABLE_THEMES = ['default', 'material'];
  */
@@ -53,7 +53,7 @@ export default defineComponent({
   name: 'asDynamicForm',
   props,
   setup(props, ctx) {
-    const { options } = useDynamicForms();
+    const { options } = useDynamicForms()
     const {
       controls,
       valueChange,
@@ -69,27 +69,29 @@ export default defineComponent({
       forceValidation,
       detectChanges,
       onOptionsChanged,
-    } = useDynamicForm(props.form as DynamicForm, ctx, options || {});
+      validateAll,
+      resetForm,
+    } = useDynamicForm(props.form as DynamicForm, ctx, options || {})
 
     watch(
       () => (props.form as DynamicForm).fields,
       fields => {
-        detectChanges(fields);
+        detectChanges(fields)
       },
       {
         deep: true,
       },
-    );
+    )
 
     watch(
       () => (props.form as DynamicForm).fields,
       options => {
-        onOptionsChanged(options);
+        onOptionsChanged(options)
       },
       {
         deep: true,
       },
-    );
+    )
     return {
       controls,
       valueChange,
@@ -103,7 +105,9 @@ export default defineComponent({
       onBlur,
       onValidate,
       forceValidation,
-    };
+      validateAll,
+      resetForm,
+    }
   },
-});
+})
 </script>
diff --git a/src/composables/useDynamicForm.ts b/src/composables/useDynamicForm.ts
index 2a774b9..eb02e04 100644
--- a/src/composables/useDynamicForm.ts
+++ b/src/composables/useDynamicForm.ts
@@ -1,4 +1,4 @@
-import { diff } from 'deep-object-diff';
+import { diff } from 'deep-object-diff'
 import {
   FieldTypes,
   FormControl,
@@ -9,7 +9,7 @@ import {
   DynamicForm,
   FormFields,
   FormOptions,
-} from '/@/core/models';
+} from '/@/core/models'
 import {
   computed,
   ComputedRef,
@@ -18,104 +18,104 @@ import {
   ref,
   Ref,
   toRaw,
-} from 'vue';
-import { deepClone, hasValue, removeEmpty } from '/@/core/utils/helpers';
-import { FieldControl } from '/@/core/factories';
-import { useDebounceFn } from './useDebounce';
-import { DynamicFormsOptions } from '/@/dynamicForms';
+} from 'vue'
+import { deepClone, hasValue, removeEmpty } from '/@/core/utils/helpers'
+import { FieldControl } from '/@/core/factories'
+import { useDebounceFn } from './useDebounce'
+import { DynamicFormsOptions } from '/@/dynamicForms'
 
 interface DynamicFormComposition {
-  controls: Ref<FormControl<InputType>[]>;
-  forceValidation: Ref<boolean>;
-  formValues: ComputedRef<(string | { [key: string]: boolean })[]>;
-  formOptions: Ref<FormOptions>;
-  errors: ComputedRef<Record<string, unknown>>;
-  isValid: ComputedRef<boolean>;
-  normalizedControls: ComputedRef<Record<string, unknown>>;
-  deNormalizedScopedSlots: ComputedRef<string[]>;
+  controls: Ref<FormControl<InputType>[]>
+  forceValidation: Ref<boolean>
+  formValues: ComputedRef<(string | { [key: string]: boolean })[]>
+  formOptions: Ref<FormOptions>
+  errors: ComputedRef<Record<string, unknown>>
+  isValid: ComputedRef<boolean>
+  normalizedControls: ComputedRef<Record<string, unknown>>
+  deNormalizedScopedSlots: ComputedRef<string[]>
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  formattedOptions: ComputedRef<any>;
-  valueChange: (event: InputEvent) => void;
-  onBlur: (event: InputEvent) => void;
-  onValidate: (event: ValidationEvent) => void;
-  handleSubmit: () => void;
-  validateAll: () => void;
-  mapControls: (empty?: boolean) => void;
-  findControlByName: (name: string | unknown) => FormControl<InputType>;
-  resetForm: () => void;
-  detectChanges: (fields: FormFields) => void;
-  onOptionsChanged: (options: FormOptions) => void;
+  formattedOptions: ComputedRef<any>
+  valueChange: (event: InputEvent) => void
+  onBlur: (event: InputEvent) => void
+  onValidate: (event: ValidationEvent) => void
+  handleSubmit: () => void
+  validateAll: () => void
+  mapControls: (empty?: boolean) => void
+  findControlByName: (name: string | unknown) => FormControl<InputType>
+  resetForm: () => void
+  detectChanges: (fields: FormFields) => void
+  onOptionsChanged: (options: FormOptions) => void
 }
 
 export function useDynamicForm(
   form: DynamicForm,
   ctx: {
     // eslint-disable-next-line @typescript-eslint/ban-types
-    slots: {};
-    emit: (arg0: string, arg1: { [x: string]: string | number }) => void;
+    slots: {}
+    emit: (arg0: string, arg1: { [x: string]: string | number }) => void
   },
   options?: DynamicFormsOptions,
 ): DynamicFormComposition {
-  let cache = deepClone(toRaw(form.fields));
+  let cache = deepClone(toRaw(form.fields))
 
-  const controls: Ref<FormControl<InputType>[]> = ref([]);
+  const controls: Ref<FormControl<InputType>[]> = ref([])
   const formOptions: Ref<FormOptions> = ref({
     resetAfterSubmit: true,
     ...options?.form,
     ...form?.options,
-  });
-  const forceValidation = ref(false);
+  })
+  const forceValidation = ref(false)
 
-  const deNormalizedScopedSlots = computed(() => Object.keys(ctx.slots));
+  const deNormalizedScopedSlots = computed(() => Object.keys(ctx.slots))
 
   const normalizedControls = computed(() => {
-    const normalizedControls = {};
+    const normalizedControls = {}
     controls.value.forEach(element => {
-      normalizedControls[element.name] = element;
-    });
-    return normalizedControls;
-  });
+      normalizedControls[element.name] = element
+    })
+    return normalizedControls
+  })
 
   const isValid = computed(() => {
-    const hasInvalidControls = controls.value.some(control => !control.valid);
-    return !hasInvalidControls;
-  });
+    const hasInvalidControls = controls.value.some(control => !control.valid)
+    return !hasInvalidControls
+  })
 
   const formValues = computed(() => {
     return removeEmpty(
       controls.value.reduce((prev, curr) => {
-        const obj = {};
+        const obj = {}
         obj[curr.name] =
           curr.type === FieldTypes.NUMBER
             ? parseFloat(`${curr.value}`)
-            : curr.value;
+            : curr.value
         return {
           ...prev,
           ...obj,
-        };
+        }
       }, {}),
-    );
-  });
+    )
+  })
 
   const errors = computed(() => {
     return controls.value
       ? controls.value.reduce((prev, curr) => {
-          const errors = Object.keys(curr.errors || {}) || [];
+          const errors = Object.keys(curr.errors || {}) || []
           if (errors.length > 0) {
-            const error = {};
-            error[curr.name] = curr.errors;
+            const error = {}
+            error[curr.name] = curr.errors
             return {
               ...prev,
               ...error,
-            };
+            }
           }
-          return prev;
+          return prev
         }, {})
-      : {};
-  });
+      : {}
+  })
 
   const formattedOptions = computed(() => {
-    const opts = formOptions.value;
+    const opts = formOptions.value
 
     if (opts) {
       const {
@@ -125,7 +125,7 @@ export function useDynamicForm(
         netlify,
         netlifyHoneypot,
         autocomplete,
-      } = opts;
+      } = opts
       return {
         class: customClass,
         style: customStyles,
@@ -133,11 +133,11 @@ export function useDynamicForm(
         'data-netlify': netlify,
         'data-netlify-honeypot': netlifyHoneypot,
         autocomplete: autocomplete ? 'on' : 'off',
-      };
+      }
     } else {
-      return;
+      return
     }
-  });
+  })
 
   function mapControls(empty = false) {
     const controlArray =
@@ -152,61 +152,64 @@ export function useDynamicForm(
               ...field,
               name: key,
             }),
-      ) || [];
+      ) || []
     if (form.fieldOrder) {
       controls.value = controlArray.sort(
         (a: FormControl<InputType>, b: FormControl<InputType>) =>
           form.fieldOrder.indexOf(a.name) - form.fieldOrder.indexOf(b.name),
-      );
+      )
     } else {
-      controls.value = controlArray;
+      controls.value = controlArray
+    }
+    if (empty) {
+      debounceEmitChanges(formValues.value)
     }
   }
 
   function findControlByName(name: string | unknown) {
-    const updatedCtrl = controls.value.find(control => control.name === name);
-    return updatedCtrl;
+    const updatedCtrl = controls.value.find(control => control.name === name)
+    return updatedCtrl
   }
 
   function emitChanges(changes: FormChanges) {
-    ctx.emit('change', changes);
+    ctx.emit('change', changes)
   }
 
-  const debounceEmitChanges = useDebounceFn(emitChanges, 300);
+  const debounceEmitChanges = useDebounceFn(emitChanges, 300)
 
   function valueChange(event: InputEvent) {
     if (hasValue(event.value)) {
-      const updatedCtrl = findControlByName(event.name);
+      const updatedCtrl = findControlByName(event.name)
       if (updatedCtrl) {
-        updatedCtrl.value = event.value as string;
-        updatedCtrl.dirty = true;
+        updatedCtrl.value = event.value as string
+        updatedCtrl.dirty = true
       }
-      debounceEmitChanges(formValues.value);
+      debounceEmitChanges(formValues.value)
     }
   }
 
   function onBlur({ name }: InputEvent) {
-    const updatedCtrl = findControlByName(name);
+    const updatedCtrl = findControlByName(name)
     if (updatedCtrl) {
-      updatedCtrl.touched = true;
+      updatedCtrl.touched = true
     }
   }
 
   function onValidate({ name, errors, valid }: ValidationEvent) {
-    const updatedCtrl = findControlByName(name);
+    const updatedCtrl = findControlByName(name)
     if (updatedCtrl) {
       updatedCtrl.errors = removeEmpty({
         ...updatedCtrl.errors,
         ...errors,
-      });
-      updatedCtrl.valid = valid;
+      })
+      updatedCtrl.valid = valid
     }
   }
 
   function detectChanges(fields) {
-    const changes = diff(cache, deepClone(fields));
+    const changes = diff(cache, deepClone(fields))
     Object.entries(changes).forEach(([key, value]) => {
-      const ctrl = findControlByName(key);
+      const ctrl = findControlByName(key)
       if (ctrl) {
         Object.entries(value).forEach(([change, newValue]) => {
           if (change === 'options' || change === 'validations') {
@@ -214,48 +217,48 @@ export function useDynamicForm(
               ctrl[change][optKey] = {
                 ...ctrl[change][optKey],
                 ...optValue,
-              };
-            });
+              }
+            })
           } else {
-            ctrl[change] = newValue;
+            ctrl[change] = newValue
           }
-        });
+        })
       }
-    });
-    cache = deepClone(toRaw(fields));
+    })
+    cache = deepClone(toRaw(fields))
   }
 
   function onOptionsChanged(changes) {
-    Object.assign(formOptions.value, changes);
+    Object.assign(formOptions.value, changes)
   }
 
   function resetForm() {
-    mapControls(true);
-    forceValidation.value = false;
+    mapControls(true)
+    forceValidation.value = false
   }
 
   async function handleSubmit() {
-    validateAll();
+    validateAll()
 
-    await nextTick();
+    await nextTick()
 
     if (isValid.value) {
-      ctx.emit('submitted', formValues.value);
+      ctx.emit('submitted', formValues.value)
       if (formOptions.value.resetAfterSubmit) {
-        resetForm();
+        resetForm()
       }
     } else {
-      ctx.emit('error', errors.value);
+      ctx.emit('error', errors.value)
     }
   }
 
   function validateAll() {
-    forceValidation.value = true;
+    forceValidation.value = true
   }
 
   onMounted(() => {
-    mapControls();
-  });
+    mapControls()
+  })
 
   return {
     controls,
@@ -277,5 +280,5 @@ export function useDynamicForm(
     resetForm,
     detectChanges,
     onOptionsChanged,
-  };
+  }
 }

From 319d7f424b5eb185690cac745ff6e5452e11c47f Mon Sep 17 00:00:00 2001
From: Alvaro <alvaro.saburido@gmail.com>
Date: Fri, 24 Sep 2021 15:53:18 +0200
Subject: [PATCH 2/3] docs: added reset form documentation

---
 docs/.vitepress/config.js         |  4 ++
 docs/guide/advanced/reset-form.md | 76 +++++++++++++++++++++++++++++++
 2 files changed, 80 insertions(+)
 create mode 100644 docs/guide/advanced/reset-form.md

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index 286c859..3c97c0a 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -88,6 +88,10 @@ const config = {
               text: 'Slots',
               link: '/guide/advanced/slots',
             },
+            {
+              text: 'Reset Form',
+              link: '/guide/advanced/reset-form',
+            },
           ],
         },
       ],
diff --git a/docs/guide/advanced/reset-form.md b/docs/guide/advanced/reset-form.md
new file mode 100644
index 0000000..233831f
--- /dev/null
+++ b/docs/guide/advanced/reset-form.md
@@ -0,0 +1,76 @@
+By default, form controls are resetted after `submit` event.
+
+It's possible to deactivate this funcionality by setting `resetAfterSubmit` to `false` on the `Form Options`.
+
+You can find and example [here](https://vue-dynamic-forms-demos.alvarosaburido.dev/reset-after-submit).
+
+```typescript
+export default {
+  data() {
+    return {
+      form: {
+        id: 'my-awesome-form',
+        fields: {
+          name: TextField({
+            label: 'Name',
+          }),
+          email: EmailField({
+            label: 'Email',
+          }),
+        },
+      },
+      options: {
+        resetAfterSubmit: false,
+      },
+    }
+  },
+}
+```
+
+# Manual Reset
+
+It's possible to reset the form controls and validation manually by accesing the `form` reference and calling the methods directly.
+
+```html
+<DynamicForm ref="formRef" :form="form" />
+```
+
+You can see the example [here](https://vue-dynamic-forms-demos.alvarosaburido.dev/reset-form).
+
+## Options API
+
+You can access the dom element ref above by using template refs `this.$ref`
+
+```typescript
+
+methods: {
+    resetForm() {
+        this.$refs.formRef.resetForm
+    }
+}
+
+```
+
+## Composition API
+
+You can access the dom element ref above by using template refs `const formRef = ref(null)`.
+
+::: warning
+Remember to add the ref to the return statement on the `setup` function so it's available on the template.
+:::
+
+```typescript
+
+setup() {
+    const formRef = ref(null);
+
+    function resetForm() {
+      formRef.value.resetForm()
+    }
+
+    return {
+        formRef
+    }
+}
+
+```

From 9501b2d43ff8cf1d87370169b52abfeb6d56aff8 Mon Sep 17 00:00:00 2001
From: Alvaro <alvaro.saburido@gmail.com>
Date: Fri, 24 Sep 2021 15:59:19 +0200
Subject: [PATCH 3/3] docs: fixed typo on resetForm function example

---
 docs/guide/advanced/reset-form.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/guide/advanced/reset-form.md b/docs/guide/advanced/reset-form.md
index 233831f..bb7f470 100644
--- a/docs/guide/advanced/reset-form.md
+++ b/docs/guide/advanced/reset-form.md
@@ -45,7 +45,7 @@ You can access the dom element ref above by using template refs `this.$ref`
 
 methods: {
     resetForm() {
-        this.$refs.formRef.resetForm
+        this.$refs.formRef.resetForm()
     }
 }