diff --git a/src/FormulateForm.vue b/src/FormulateForm.vue index 848680d..f54f067 100644 --- a/src/FormulateForm.vue +++ b/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) diff --git a/src/FormulateInput.vue b/src/FormulateInput.vue index 201150f..8947fc6 100644 --- a/src/FormulateInput.vue +++ b/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 diff --git a/test/unit/FormulateForm.test.js b/test/unit/FormulateForm.test.js index 70f9929..6372e67 100644 --- a/test/unit/FormulateForm.test.js +++ b/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: ` + + + + + ` + }) + 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' } },