converting input field to v2.0

Author: matt-sanders

src/directives/index.js

@@ -3,12 +3,25 @@ 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]);
-    });
-    */
+  Vue.directive('formly-atts',{
+    bind:function(el, binding){
+      
+      if ( !binding.value ) return;
+      
+      Object.keys(binding.value).forEach((key) => {
+        el.setAttribute(key, value[key]);
+      });
+      
+    }
   });
+
+  
+  Vue.directive('formly-input-type', {
+    bind: function(el, binding){
+      if ( !binding.value ) return;
+
+      el.setAttribute('type', binding.value);
+    }
+  });
+  
 }

src/fields/baseField.js

@@ -18,19 +18,19 @@ export default
       if ( typeof this.to[action] == 'function' ) this.to[action].call(this, e);
     },
     onFocus: function(e){
-      this.$set('form.'+this.field.key+'.$active', true);
+      this.$set(this.form[this.field.key], '$active', true);
       this.runFunction('onFocus', e);
     },
     onBlur: function(e){
-      this.$set('form.'+this.field.key+'.$dirty', true);
-      this.$set('form.'+this.field.key+'.$active', false);
+      this.$set(this.form[this.field.key], '$dirty', true);
+      this.$set(this.form[this.field.key], '$active', false);
       this.runFunction('onBlur', e);
     },
     onClick: function(e){
       this.runFunction('onClick', e);
     },
     onChange: function(e){
-      this.$set('form.'+this.field.key+'.$dirty', true);
+      this.$set(this.form[this.field.key], '$dirty', true);
       this.runFunction('onChange', e);
     },
     onKeyup: function(e){

src/fields/fieldInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="form-group formly-input" :class="[ to.type, {'formly-has-value': model[field.key], 'formly-has-focus': form[field.key].$active}]">
     <label v-if="to.label" :for="to.id ? to.id : null">{{to.label}}</label>
-    <input class="form-control" :class="to.classes" :id="to.id ? to.id : null" :type="to.type || text" v-model="model[field.key]" @blur="onBlur" @focus="onFocus" @click="onClick" @change="onChange" @keyup="onKeyup" @keydown="onKeydown" v-formly-atts="to.atts">
+    <input class="form-control" :class="to.classes" :id="to.id ? to.id : null" type="text"  v-model="model[field.key]" @blur="onBlur" @focus="onFocus" @click="onClick" @change="onChange" @keyup="onKeyup" @keydown="onKeydown" v-formly-atts="to.atts">
   </div>
 </template>
 
@@ -11,13 +11,13 @@
    mixins: [baseField],
    methods: {
      onChange: function(e){
-       /*
-       this.$set('form.'+this.key+'.$dirty', true);
+       
+       this.$set(this.form[this.field.key], '$dirty', true);
        this.runFunction('onChange', e);
-       if ( this.form[this.key].inputType == 'file' ){
-         this.$set('form.'+this.key+'.files', this.$el.querySelector('input').files);
+       if ( this.to.type == 'file' ){
+         this.$set(this.model, this.field.key, this.$el.querySelector('input').files);
        }
-       */
+       
      }
    }
  }