Fixes issue #55, removing form data on deregister

src/FormulateForm.vue

@@ -104,7 +104,7 @@ export default {
           for (const field in newValue) {
             if (this.registry.has(field) &&
               !shallowEqualObjects(newValue[field], this.proxy[field]) &&
-              !shallowEqualObjects(newValue[field], this.registry.get(field).internalModelProxy[field])
+              !shallowEqualObjects(newValue[field], this.registry.get(field).proxy[field])
             ) {
               this.setFieldValue(field, newValue[field])
               this.registry.get(field).context.model = newValue[field]

src/FormulateInput.vue

@@ -240,7 +240,7 @@ export default {
       defaultId: this.$formulate.nextId(this),
       localAttributes: {},
       localErrors: [],
-      internalModelProxy: this.getInitialValue(),
+      proxy: this.getInitialValue(),
       behavioralErrorVisibility: (this.errorBehavior === 'live'),
       formShouldShowErrors: false,
       validationErrors: [],
@@ -284,7 +284,7 @@ export default {
       },
       deep: true
     },
-    internalModelProxy (newValue, oldValue) {
+    proxy (newValue, oldValue) {
       this.performValidation()
       if (!this.isVmodeled && !shallowEqualObjects(newValue, oldValue)) {
         this.context.model = newValue
@@ -339,11 +339,11 @@ export default {
       // This should only be run immediately on created and ensures that the
       // proxy and the model are both the same before any additional registration.
       if (
-        !shallowEqualObjects(this.context.model, this.internalModelProxy) &&
+        !shallowEqualObjects(this.context.model, this.proxy) &&
         // we dont' want to set the model if we are a sub-box of a multi-box field
         (Object.prototype.hasOwnProperty(this.$options.propsData, 'options') && this.classification === 'box')
       ) {
-        this.context.model = this.internalModelProxy
+        this.context.model = this.proxy
       }
     },
     updateLocalAttributes (value) {

src/libs/context.js

@@ -316,7 +316,7 @@ function defineModel (context) {
  * Get the value from a model.
  **/
 function modelGetter () {
-  const model = this.isVmodeled ? 'formulateValue' : 'internalModelProxy'
+  const model = this.isVmodeled ? 'formulateValue' : 'proxy'
   if (this.type === 'checkbox' && !Array.isArray(this[model]) && this.options) {
     return []
   }
@@ -330,8 +330,8 @@ function modelGetter () {
  * Set the value from a model.
  **/
 function modelSetter (value) {
-  if (!shallowEqualObjects(value, this.internalModelProxy)) {
-    this.internalModelProxy = value
+  if (!shallowEqualObjects(value, this.proxy)) {
+    this.proxy = value
   }
   this.$emit('input', value)
   if (this.context.name && typeof this.formulateSetter === 'function') {

src/libs/registry.js

@@ -30,6 +30,8 @@ class Registry {
    */
   remove (name) {
     this.registry.delete(name)
+    const { [name]: value, ...newProxy } = this.ctx.proxy
+    this.ctx.proxy = newProxy
     return this
   }
 
@@ -88,11 +90,11 @@ class Registry {
       component.context.model = this.ctx.initialValues[field]
     } else if (
       (hasVModelValue || hasValue) &&
-      !shallowEqualObjects(component.internalModelProxy, this.ctx.initialValues[field])
+      !shallowEqualObjects(component.proxy, this.ctx.initialValues[field])
     ) {
       // In this case, the field is v-modeled or has an initial value and the
       // form has no value or a different value, so use the field value
-      this.ctx.setFieldValue(field, component.internalModelProxy)
+      this.ctx.setFieldValue(field, component.proxy)
     }
     if (this.childrenShouldShowErrors) {
       component.formShouldShowErrors = true
@@ -118,7 +120,7 @@ class Registry {
       proxy: {},
       registry: this,
       register: this.register.bind(this),
-      deregister: field => this.registry.delete(field),
+      deregister: field => this.remove(field),
       childrenShouldShowErrors: false
     }
   }

test/unit/FormulateForm.test.js

@@ -514,25 +514,26 @@ describe('FormulateForm', () => {
     })
   })
 
-  // it('removes field data when that field is de-registered', async () => {
-  //   const wrapper = mount({
-  //     template: `
-  //       <FormulateForm
-  //         v-model="formData"
-  //       >
-  //         <FormulateInput type="text" name="foo" value="abc123" />
-  //         <FormulateInput type="checkbox" name="bar" v-if="formData.foo !== 'bar'" :value="true" />
-  //       </FormulateForm>
-  //     `,
-  //     data () {
-  //       return {
-  //         formData: {}
-  //       }
-  //     }
-  //   })
-  //   await flushPromises()
-  //   wrapper.find('input[type="text"]').setValue('bar')
-  //   await flushPromises()
-  //   expect(wrapper.vm.formData).toEqual({ bar: true })
-  // })
+  it('removes field data when that field is de-registered', async () => {
+    const wrapper = mount({
+      template: `
+        <FormulateForm
+          v-model="formData"
+        >
+          <FormulateInput type="text" name="foo" value="abc123" />
+          <FormulateInput type="checkbox" name="bar" v-if="formData.foo !== 'bar'" :value="1" />
+        </FormulateForm>
+      `,
+      data () {
+        return {
+          formData: {}
+        }
+      }
+    })
+    await flushPromises()
+    wrapper.find('input[type="text"]').setValue('bar')
+    await flushPromises()
+    expect(wrapper.findComponent(FormulateForm).vm.proxy).toEqual({ foo: 'bar' })
+    expect(wrapper.vm.formData).toEqual({ foo: 'bar' })
+  })
 })

test/unit/FormulateInputText.test.js

@@ -180,7 +180,7 @@ describe('FormulateInputText', () => {
     const wrapper = mount(FormulateInput, { propsData: { type: 'textarea' } })
     const input = wrapper.find('textarea')
     input.setValue('changed value')
-    expect(wrapper.vm.internalModelProxy).toBe('changed value')
+    expect(wrapper.vm.proxy).toBe('changed value')
   })