Components now deregister themselves when removed

src/components/Formulate.vue

@@ -102,6 +102,12 @@ export default {
       this.$store.commit(`${this.m}setFieldMeta`, {form: this.name, field, data})
       this.updateFormValidation()
     },
+    deregisterField (field) {
+      this.$store.commit(`${this.m}removeField`, {
+        form: this.name,
+        field
+      })
+    },
     hydrate (values) {
       for (let field of this.fields) {
         if (field.type !== 'submit' && typeof this.values[field.name] === 'undefined') {

src/components/FormulateElement.vue

@@ -308,12 +308,25 @@ export default {
     }
   },
   created () {
-    this.form.registerField(
-      this.name,
-      filter(this.$props, (prop, value) => ['name', 'type', 'id', 'label', 'validation', 'validationLabel'].includes(prop))
-    )
-    if (this.initial !== false) {
-      this.form.setInitial(this.name, this.initial)
+    if (typeof window === 'undefined') {
+      this.register()
+    }
+  },
+  mounted () {
+    this.register()
+  },
+  beforeDestroy () {
+    this.form.deregisterField(this.name)
+  },
+  methods: {
+    register () {
+      this.form.registerField(
+        this.name,
+        filter(this.$props, (prop, value) => ['name', 'type', 'id', 'label', 'validation', 'validationLabel'].includes(prop))
+      )
+      if (this.initial !== false) {
+        this.form.setInitial(this.name, this.initial)
+      }
     }
   }
 }

src/store.js

@@ -1,4 +1,4 @@
-import {map, reduce} from './utils'
+import {map, reduce, filter} from './utils'
 
 /**
  * Curried function for creating the formState
@@ -83,6 +83,13 @@ export const formulateMutations = (mutations = {}) => Object.assign({
         [form]: map(state.values[form], (key, value) => undefined)
       })
     }
+  },
+  removeField (state, {form, field}) {
+    for (let group in state) {
+      if (state[group][form] && state[group][form].hasOwnProperty(field)) {
+        state[group][form] = filter(state[group][form], (key, value) => key !== field)
+      }
+    }
   }
 }, mutations)
 

tests/store.test.js

@@ -176,3 +176,22 @@ test('wont mutate undefined form on reset', async t => {
   formulateMutations().resetForm(state, 'register')
   t.deepEqual(state.values, {login: {username: 'testuser', password: 'secret'}})
 })
+
+test('removeField deletes values from store', async t => {
+  let state = {
+    values: {
+      register: {
+        username: 'testuser',
+        password: 'secret'
+      }
+    }
+  }
+  formulateMutations().removeField(state, {form: 'register', field: 'password'})
+  t.deepEqual({
+    values: {
+      register: {
+        username: 'testuser'
+      }
+    }
+  }, state)
+})