ayanova/src/api/gzform.js

@@ -332,9 +332,9 @@ export default {
         throw "DEV ERROR gzform::serverErrors -> appError seems to be missing from form's vue data object";
       }
 
-      //make sure errorBoxMessage is defined on data
-      if (!vm.$_.has(vm, "errorBoxMessage")) {
-        throw "DEV ERROR gzform::serverErrors -> errorBoxMessage seems to be missing from form's vue data object";
+      //make sure formState.errorBoxMessage is defined on data
+      if (!vm.$_.has(vm, "formState.errorBoxMessage")) {
+        throw "DEV ERROR gzform::serverErrors -> formState.errorBoxMessage seems to be missing from form's vue data object";
       }
 
       //ensure the error returned is in an expected format to catch coding errors at the server end
@@ -415,7 +415,7 @@ export default {
     //clear app errors
     vm.appError = null;
     //clear out actual message box display
-    vm.errorBoxMessage = null;
+    vm.formState.errorBoxMessage = null;
     //Update the form status
     this.setFormState({
       vm: vm,
@@ -429,7 +429,7 @@ export default {
   setErrorBoxErrors(vm) {
     var errs = this.serverErrors(vm, "errorbox");
     var ret = getErrorBoxErrors(vm, errs);
-    vm.errorBoxMessage = ret;
+    vm.formState.errorBoxMessage = ret;
   },
   ///////////////////////////////
   // On onChange handler

ayanova/src/views/inventory-widget-edit.vue

@@ -6,14 +6,14 @@
           <v-flex xs12 mt-1 mb-2>
             <v-alert
               ref="errorbox"
-              v-show="errorBoxMessage"
+              v-show="formState.errorBoxMessage"
               color="error"
               icon="fa-exclamation-circle "
               value="true"
               transition="scale-transition"
               class="multi-line"
               outline
-            >{{errorBoxMessage}}</v-alert>
+            >{{formState.errorBoxMessage}}</v-alert>
           </v-flex>
           <v-flex xs12 sm6 lg4 xl3 px-2>
             <v-text-field
@@ -252,31 +252,33 @@ export default {
     return {
       obj: {},
       serverError: {},
-      errorBoxMessage: null,
+
       appError: null,
       formState: {
         ready: false,
         dirty: false,
         valid: true,
         readOnly: false,
-        loading: true
+        loading: true,
+        errorBoxMessage: null
       }
     };
   },
-  watch: {
-    canSave: {
-      // xeslint-disable-next-line
-      handler: function(newState) {
-        this.$gzevent.$emit(
-          "menu-replace-item",
-          "inventory-widget-edit:save",
-          newState
-        );
-        //todo: change the save button state here
-        //console.log("Valid CHANGED, was " + oldObj + " Now is " + newObj);
-      }
-    }
-  },
+  // ,
+  // watch: {
+  //   canSave: {
+  //     // xeslint-disable-next-line
+  //     handler: function(newState) {
+  //       this.$gzevent.$emit(
+  //         "menu-replace-item",
+  //         "inventory-widget-edit:save",
+  //         newState
+  //       );
+  //       //todo: change the save button state here
+  //       //console.log("Valid CHANGED, was " + oldObj + " Now is " + newObj);
+  //     }
+  //   }
+  // },
   computed: {
     canSave: function() {
       return this.formState.valid && this.formState.dirty;
@@ -320,8 +322,7 @@ export default {
         });
     },
     submit() {
-      //check if form is valid, as far as I know this is the way you're supposed to do it and in testing it does not force all fields to revalidate individually
-      if (this.canSave()) {
+      if (this.canSave) {
         this.formState.loading = true;
         var vm = this;
         var url = "Widget/" + this.$route.params.id;