added custom attributes

Author: matt-sanders

src/directives/index.js

@@ -0,0 +1,12 @@
+export default function(Vue){
+    /**
+     * Allows the user to pass extra attributes that should be added to the element. Such as placeholder etc etc
+     * @param {Object} value
+     */
+    Vue.directive('formly-atts', function(value){
+        if ( typeof value == 'undefined' ) return;
+        Object.keys(value).forEach((key) => {
+            this.el.setAttribute(key, value[key]);
+        });
+    });
+}

src/fields/fieldInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="form-group">
     <label v-if="form[key].label" :for="form[key].id ? form[key].id : null">{{form[key].label}}</label>
-    <input class="form-control" :id="form[key].id ? form[key].id : null" :type="form[key].inputType" v-model="form[key].value" :placeholder="form[key].placeholder" @blur="onBlur" @focus="onFocus" @click="onClick" @change="onChange" @keyup="onKeyup" @keydown="onKeydown">
+    <input class="form-control" :id="form[key].id ? form[key].id : null" :type="form[key].inputType" v-model="form[key].value" :placeholder="form[key].placeholder" @blur="onBlur" @focus="onFocus" @click="onClick" @change="onChange" @keyup="onKeyup" @keydown="onKeydown" v-formly-atts="form[key].atts">
   </div>
 </template>
 

src/index.js

@@ -1,6 +1,9 @@
+import directives from './directives/index.js';
 let Fields = require.context("./fields/", false, /^\.\/field([\w-_]+)\.vue$/);
 let FormlyBootstrap = {
     install(Vue, options){
+        directives(Vue);
+        
         Fields.keys().forEach((key) => {
             //remove all the .vue crap
             let component = key

test/unit/specs/index.spec.js

@@ -29,7 +29,7 @@ function trigger (target, event, process) {
     target.dispatchEvent(e);
 }
 
-describe('components', () => {
+describe('Bootstrap Field Inputs', () => {
 
     beforeEach(() => {
         data = {
@@ -108,6 +108,21 @@ describe('components', () => {
 
     });
 
+    describe('attributes', () => {
+        it('should pass attributes', () => {
+            data.form.test.type = 'input';
+            data.form.test.inputType = 'text';
+            data.form.test.atts = {
+                'data-foo': 'bar',
+                'data-bar': 'foo'
+            };
+            createForm();
+            let input = vm.$el.querySelectorAll('input')[0];
+            expect(input.dataset.foo).to.equal('bar');
+            expect(input.dataset.bar).to.equal('foo');
+        });
+    });
+
     describe('input', () => {
 
         it('basic functions', (done) => {