feature(next): added reset form

Author: alvarosabu

dev/vue/App.vue

@@ -39,7 +39,6 @@ export default defineComponent({
       fields: [
         new TextInput({
           label: 'Name',
-          value: 'Awiwi',
         }),
         new EmailInput({
           label: 'Email',
@@ -67,12 +66,12 @@ export default defineComponent({
     function handleSubmit(values) {
       console.log('Values Submitted', values);
     }
-    onMounted(() =>
+    /*   onMounted(() =>
       setTimeout(() => {
         form.fields[0].label = 'RockNRoll';
         form.fields[0].value = 'James Bond';
       }, 2000),
-    );
+    ); */
     return {
       title,
       form,

src/components/dynamic-form/DynamicForm.vue

@@ -47,11 +47,31 @@ export default defineComponent({
     const controls: Ref<FormControl<any>[] | undefined> = ref([]);
     const formValues = reactive({});
     const submited = ref(false);
-    watchEffect(() => {
+
+    function valueChanged(changedValue: any) {
+      Object.assign(formValues, changedValue);
+    }
+
+    function mapControls(empty?) {
       controls.value =
-        props.form?.fields?.map(
-          (field: InputBase<any>) => new FormControl({ ...field }),
+        props.form?.fields?.map((field: InputBase<any>) =>
+          empty
+            ? new FormControl({ ...field, value: null })
+            : new FormControl({ ...field }),
         ) || [];
+    }
+
+    function resetForm() {
+      mapControls(true);
+    }
+
+    function handleSubmit() {
+      submited.value = true;
+      emit('submited', formValues);
+      resetForm();
+    }
+
+    function initValues() {
       Object.assign(
         formValues,
         controls.value
@@ -66,16 +86,12 @@ export default defineComponent({
             }, {})
           : {},
       );
-    });
-
-    function valueChanged(changedValue: any) {
-      Object.assign(formValues, changedValue);
     }
 
-    function handleSubmit() {
-      submited.value = true;
-      emit('submited', formValues);
-    }
+    watchEffect(() => {
+      mapControls();
+      initValues();
+    });
 
     return {
       controls,