Merge pull request #71 from wearebraid/feature/deregister-input

adding FormulateInput deregister functionality

src/FormulateForm.vue

@@ -22,6 +22,7 @@ export default {
     return {
       formulateFormSetter: this.setFieldValue,
       formulateFormRegister: this.register,
+      formulateFormDeregister: this.deregister,
       getFormValues: this.getFormValues,
       observeErrors: this.addErrorObserver,
       removeErrorObserver: this.removeErrorObserver
@@ -217,6 +218,9 @@ export default {
         this.setFieldValue(field, component.internalModelProxy)
       }
     },
+    deregister (field) {
+      delete this.registry[field]
+    },
     registerErrorComponent (component) {
       if (!this.errorComponents.includes(component)) {
         this.errorComponents.push(component)

src/FormulateInput.vue

@@ -68,6 +68,7 @@ export default {
   inject: {
     formulateFormSetter: { default: undefined },
     formulateFormRegister: { default: undefined },
+    formulateFormDeregister: { default: undefined },
     getFormValues: { default: () => () => ({}) }
   },
   model: {
@@ -249,6 +250,11 @@ export default {
     this.updateLocalAttributes(this.$attrs)
     this.performValidation()
   },
+  beforeDestroy () {
+    if (this.formulateFormDeregister && typeof this.formulateFormDeregister === 'function') {
+      this.formulateFormDeregister(this.nameOrFallback)
+    }
+  },
   methods: {
     getInitialValue () {
       // Manually request classification, pre-computed props

test/unit/FormulateForm.test.js

@@ -46,6 +46,26 @@ describe('FormulateForm', () => {
     expect(Object.keys(wrapper.vm.registry)).toEqual(['subinput1', 'subinput2'])
   })
 
+  it('deregisters a subcomponents', async () => {
+    const wrapper = mount({
+      data () {
+        return {
+          active: true
+        }
+      },
+      template: `
+        <FormulateForm>
+          <FormulateInput v-if="active" type="text" name="subinput1" />
+          <FormulateInput type="checkbox" name="subinput2" />
+        </FormulateForm>
+      `
+    })
+    expect(Object.keys(wrapper.find(FormulateForm).vm.registry)).toEqual(['subinput1', 'subinput2'])
+    wrapper.setData({ active: false })
+    await flushPromises()
+    expect(Object.keys(wrapper.find(FormulateForm).vm.registry)).toEqual(['subinput2'])
+  })
+
   it('can set a field’s initial value', async () => {
     const wrapper = mount(FormulateForm, {
       propsData: { formulateValue: { testinput: 'has initial value' } },