CSR-1088- Got Mobile location modal working and validating correctly

src/digital-components/textbox-question/textbox-question.vue

@@ -27,7 +27,6 @@
                     cornerStyle === 'rounded' ? 'rounded-pill' : '',
                 ]"
                 :validationRules="validationRules"
-                @input="handleOnInput === true ? 'handleChange' : ''"
                 @change="handleChange"
                 @blur="handleChange"
                 :maxlength="maxLength ? maxLength : '999'"

src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue

@@ -25,11 +25,11 @@
         @footer-button-event="setMobileLocation">
         <addressQuestions
             ref="addressQuestions"
-            v-model="mobileLocationQuestionModel.addressQuestions"
+            v-model="mobileLocationQuestionsInput.addressQuestions"
             captureApartmentNumberOrBusinessName="true" />
         <vehicleProtectedQuestion
             ref="vehicleProtectedQuestion"
-            v-model="mobileLocationQuestionModel.isVehicleProtected"
+            v-model="mobileLocationQuestionsInput.isVehicleProtected"
             cmsWidgetName="VehicleProtectedQuestionWidget" />
         <textBlock cmsWidgetName="WorkspaceRequirementsWidget" typeStyle="caption" />
     </modal>
@@ -45,12 +45,36 @@ import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location
 import textBlock from "@/digital-components/text-block/text-block";
 
 // Supporting Files
+import { useForm } from "vee-validate";
 
 // Define Validation Rules
 
 export default {
     name: "mobile-location-modal-questions",
     emits: ["update:modelValue"], // The component emits an event
+    data() {
+        return {
+            mobileLocationQuestionsInput: {                
+                addressQuestions: {
+                    streetAddress: "",
+                    apartmentNumberOrBusinessName: "",
+                    city: "",
+                    state: "",
+                    zipCode: "",
+                },
+                isVehicleProtected: null,
+                isZipServiceableMobile: null,
+                isZipServiceableInShop: null
+            }
+        }
+    },
+    setup() {
+        const modalForm = useForm();
+
+        return {
+            modalForm,
+        };
+    },
     props: {
         modelValue: {
             type: Object,
@@ -102,7 +126,7 @@ export default {
         modalName() {
             return this.modalWidgetName;
         },
-        mobileLocationQuestionModel: {
+        mobileLocationQuestionsModel: {
             get: function () {
                 return this.modelValue;
             },
@@ -112,7 +136,7 @@ export default {
         },
         addressModel: {
             get: function () {
-                return this.mobileLocationQuestionModel.addressQuestions;
+                return this.mobileLocationQuestionsModel.addressQuestions;
             },
         },
         _isVehicleProtected: {
@@ -128,6 +152,9 @@ export default {
         openModal() {
             this.$refs[this.modalName].openModal();
         },
+        onModalClosed() {
+            this.mobileLocationQuestionsInput = this.mobileLocationQuestionsModel;
+        },
         closeModal() {
             this.$refs[this.modalName].closeModal();
         },
@@ -140,9 +167,24 @@ export default {
             this.addressModel.zipCode = "";
 
             // Is Vehicle Protected
-            this._isVehicleProtected = null;
+            this.mobileLocationQuestionsModel.isVehicleProtected = null;
         },
         async setMobileLocation() {
+
+            this.mobileLocationQuestionsModel = {
+                addressQuestions: {
+                    streetAddress: this.addressModel.streetAddress,
+                    apartmentNumberOrBusinessName: this.addressModel.apartmentNumberOrBusinessName,
+                    city: this.addressModel.city,
+                    state: this.addressModel.state,
+                    zipCode: this.addressModel.zipCode,
+                },
+                isVehicleProtected: this.mobileLocationQuestionsModel.isVehicleProtected,
+                isZipServiceableMobile: this.mobileLocationQuestionsModel.isZipServiceableMobile,
+                isZipServiceableInShop: this.mobileLocationQuestionsModel.isZipServiceableInShop,
+
+            }
+
             this.closeModal();
         },
     },