adding wrapper options to vue formly

Author: matt-sanders

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-formly",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "A simple and extendable form builder for Vue.js",
   "main": "dist/vue-formly.js",
   "scripts": {

src/components/FormlyField.vue

@@ -51,6 +51,24 @@
      this.$watch('model.'+this.field.key, (val) =>{
        let valid = this.validate();
      });
+   },
+   mounted(){
+     if ( !this.field.wrapper ) return;
+     
+     //create a temporary element
+     let wrapper = document.createElement('DIV');
+     //populate it with the wrapper string
+     wrapper.innerHTML = this.field.wrapper;
+     //get the parent
+     let parent = this.$el.parentNode;
+     //insert the wrapper before this element
+     parent.insertBefore(wrapper, this.$el);
+     //append the element to the new wrapper
+     wrapper.firstChild.appendChild( this.$el );
+     //move the new wrapper back to where it should be
+     parent.insertBefore(wrapper.firstChild, wrapper);
+     //remove the temporary element
+     parent.removeChild(wrapper);
    }
  }
 </script>

test/unit/specs/FormlyField.spec.js

@@ -6,16 +6,16 @@ import FormlyField from 'src/components/FormlyField.vue';
 let el, vm;
 
 function createForm(template, data){
-  el = document.createElement('div');
+  el = document.createElement('DIV');
+  document.body.appendChild(el);
   //el.innerHTML = template;
   vm = new Vue({
-    el: el,
     data: data,
     template: template,
     components: {
       'formly-field': FormlyField
     }
-  }).$mount();
+  }).$mount(el);
 
   return [el, vm];
 }
@@ -123,6 +123,35 @@ describe('FormlyField', () => {
 
   });
 
+  it('Should take a wrapper string', () => {
+    Vue.component('formly_test', {
+      props: ['form', 'field', 'model', 'to'],
+      template: '<div></div>'
+    });
+    
+    let data = {
+      form: {
+        $errors: {},
+        $valid: {}
+      },
+      fields: [
+        {
+          key: 'wrapped',
+          type: 'test',
+          wrapper: '<div id="test_wrapper_element"></div>'
+        }
+      ],
+      model: {
+        wrapped: ''
+      }
+    };
+    createForm('<formly-field :form.sync="form" :field="fields[0]" :model="model"></formly-field>', data);
+
+    let parent = vm.$el.parentNode;
+    expect(parent.firstChild).to.equal(vm.$el);
+    expect(parent.id).to.equal('test_wrapper_element');    
+  });
+
 
   describe('Validation', ()=>{