Added code to enable / disable the Footer Button

src/digital-components/modal/modal.vue

@@ -32,7 +32,8 @@
                         ref="buttonMain"
                         suppressLoader
                         :buttonText="footerButtonText"
-                        @click-event="validateAndEmit" />
+                        @click-event="validateAndEmit"
+                        :class="isFooterButtonDisabled && 'form-test-invalid'" />
                 </div>
             </div>
         </div>
@@ -42,6 +43,7 @@
 <script>
 import buttonMain from "@/ux-components/button-main/button-main";
 import { Modal } from "bootstrap";
+import { useIsFormTouched, useIsFormDirty, useIsFormValid } from "vee-validate";
 
 export default {
     name: "modal",
@@ -49,20 +51,26 @@ export default {
         modalId: String,
         headerText: String,
         footerButtonText: String,
-        modalForm: {
-            type: Object,
-        },
         onModalOpenedCallback: {
             type: Function,
         },
     },
+    setup() {        
+        const isTouched = useIsFormTouched();
+        const isDirty = useIsFormDirty();
+        const isValid = useIsFormValid();
+
+        return {
+            isTouched,
+            isDirty,
+            isValid,
+        };
+    },
     methods: {
         async validateAndEmit() {
-            const validationResult = await this.modalForm.validate();
-            if (validationResult.valid) {
+            if (!this.isModalSubmitDisabled) {
                 this.$emit("footer-button-event");
             }
-
             this.resetButtonStyle();
         },
         resetButtonStyle() {
@@ -77,6 +85,14 @@ export default {
             modal.hide();
         },
     },
+    computed: {
+        isFooterButtonDisabled() {
+            if (!this.isTouched) {
+                return !this.isValid;
+            }
+            return !this.isDirty || !this.isValid;
+        },
+    },
     components: {
         buttonMain,
     },