Update TO form and nested components to emit directly to parent components instead of emitting from the root component

js/mixins/form.js

@@ -13,10 +13,12 @@ export default {
 
   mounted: function() {
     this.$root.$on('field-change', this.handleFieldChange)
+    this.$on('field-change', this.handleFieldChange)
   },
 
   created: function() {
     this.$root.$on('field-mount', this.handleFieldMount)
+    this.$on('field-mount', this.handleFieldMount)
   },
 
   methods: {

js/mixins/form_mixin.js

@@ -0,0 +1,54 @@
+export default {
+  props: {
+    initialSelectedSection: String,
+    hasChanges: {
+      type: Boolean,
+      default: false,
+    },
+    enableSave: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data: function() {
+    return {
+      changed: this.hasChanges,
+      valid: false,
+    }
+  },
+
+  mounted: function() {
+    this.$on('field-change', this.handleFieldChange)
+    this.valid = this.validateFields()
+  },
+
+  methods: {
+    handleFieldChange: function(event) {
+      this.valid = this.validateFields()
+      this.changed = true
+    },
+
+    validateFields: function() {
+      return this.$children.every(child => child.valid)
+    },
+
+    handleSubmit: function(event) {
+      if (!this.valid) {
+        event.preventDefault()
+      }
+    },
+  },
+
+  computed: {
+    canSave: function() {
+      if (this.changed && this.valid) {
+        return true
+      } else if (this.enableSave && this.valid) {
+        return true
+      } else {
+        return false
+      }
+    },
+  },
+}

js/mixins/text_input_mixin.js

@@ -53,6 +53,10 @@ export default {
     rawValue: function() {
       return this._rawValue(this.value)
     },
+
+    valid: function() {
+      return this._isValid(this.value)
+    },
   },
 
   mounted: function() {
@@ -136,6 +140,10 @@ export default {
       }
 
       // Emit a change event
+      this.$parent.$emit('field-change', {
+        value: this._rawValue(value),
+        name: this.name,
+      })
       emitEvent('field-change', this, {
         value: this._rawValue(value),
         valid: this._isValid(value),