Fixes #1 (#2)

* beginning v2 build

* FormlyForm ready for 2.0

* working on the FormlyField component

* working on field validation

* added template options

* build

Author: matt-sanders

dist/vue-formly.js

@@ -1,6 +1,6 @@
 {
   "name": "vue-formly",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "A simple and extendable form builder for Vue.js",
   "main": "dist/vue-formly.js",
   "scripts": {
@@ -9,7 +9,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/matt-sanders/vue-formly.git"
+    "url": "git+https://github.com/formly-js/vue-formly.git"
   },
   "keywords": [
     "vue",
@@ -18,9 +18,12 @@
   ],
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/matt-sanders/vue-formly/issues"
+    "url": "https://github.com/formly-js/vue-formly/issues"
+  },
+  "homepage": "https://github.com/formly-js/vue-formly#readme",
+  "peerDependencies": {
+    "vue": "2.x"
   },
-  "homepage": "https://github.com/matt-sanders/vue-formly#readme",
   "devDependencies": {
     "babel-core": "6.11.4",
     "babel-loader": "6.2.4",
@@ -71,7 +74,6 @@
     "sinon-chai": "2.8.0",
     "style-loader": "0.13.1",
     "uglify-js": "^2.6.4",
-    "vue": "1.0.26",
     "vue-hot-reload-api": "1.3.2",
     "vue-html-loader": "1.2.3",
     "vue-loader": "8.5.3",

dist/vue-formly.min.js

@@ -1,52 +1,56 @@
 <template>
-  <component :is="type" :form.sync="form" :key="key"></component>
+  <component :is="type" :form.sync="form" :field="field" :model="model" :to="field.templateOptions"></component>
 </template>
 
 <script>
  const Vue = require('vue');
  import Util, {getTypes, setError} from '../util';
  export default {
-     props: ['form', 'key'],
-     computed: {
-         type:function(){
-             return 'formly_'+this.form[this.key].type;
-         }
-     },
-     methods: {
-         validate:function(){
-             let field = this.form[this.key];
+   props: ['form', 'model', 'field', 'to'],
+   computed: {
+     type:function(){
+       return 'formly_'+this.field.type;
+     }
+   },
+   methods: {
+     validate:function(){
 
-             //first check if we need to create a field
-             if ( !this.form.$errors[this.key] ) this.$set('form.$errors.'+this.key, {});
+       //first check if we need to create a field
+       if ( !this.form.$errors[this.field.key] ) this.$set(this.form.$errors, this.field.key, {});
+       if ( !this.field.templateOptions ) this.$set(this.field, 'templateOptions', {});
 
-             //check for required fields. This whole setting,unsetting thing seems kind of wrong though..
-             //there might be a more 'vue-ey' way to do this...
-             if ( field.required ){
-                 if ( !this.form.$errors[this.key].required ) this.$set('form.$errors.'+this.key+'.required', true);
-                 setError(this.form, this.key, 'required', !field.value) ;
-             }
+       //check for required fields. This whole setting,unsetting thing seems kind of wrong though..
+       //there might be a more 'vue-ey' way to do this...
+       if ( this.field.required ){
+         if ( !this.form.$errors[this.field.key].required ) this.$set(this.form.$errors[ this.field.key ], 'required', true);
+         setError(this.form, this.field.key, 'required', !this.model[ this.field.key ]) ;
+       }
 
-             //if we've got nothing left then return
-             if ( !field.validators ) return;
+       //if we've got nothing left then return
+       if ( !this.field.validators ) return;
 
-             Object.keys(field.validators).forEach((validKey) => {
-                 if ( !this.form.$errors[this.key][validKey] ) this.$set('form.$errors.'+this.key+'.'+validKey, false);
-                 if ( !field.required && !field.value ) return;
+       //set these for the validators so we don't have to use 'this' in them
+       let model = this.model;
+       let field = this.field;
+       
+       Object.keys(this.field.validators).forEach((validKey) => {
+         if ( !this.form.$errors[this.field.key][validKey] ) this.$set(this.form.$errors[ this.field.key ], validKey, false);
+         if ( !this.field.required && !this.model[ this.field.key ] ) return;
 
-                 let validator = field.validators[validKey];
+         let validator = this.field.validators[validKey];
 
-                 let valid = typeof validator == 'function' ? !validator(field) : !eval(validator);
-                 setError(this.form, this.key, validKey, valid);
-                 
-             });
-         }
-     },
-     components: getTypes(),
-     created(){
-         this.validate();
-         this.$watch('form.'+this.key+'.value', (val) =>{
-             let valid = this.validate();
-         });
+         let valid = typeof validator == 'function' ? !validator(field, model) : !eval(validator);
+         setError(this.form, this.field.key, validKey, valid);
+         
+       });
      }
-  }
+   },
+   components: getTypes(),
+   created(){
+     this.validate();
+     this.$watch('model.'+this.field.key, (val) =>{
+       let valid = this.validate();
+     });
+   }
+ }
 </script>

package.json

@@ -1,37 +1,38 @@
 <template>
   <fieldset>
-    <template v-if="!customLayout">
-      <formly-field v-for="field in form | formlyFields" :form.sync="form" :key="field" ></formly-field>
-    </template>
+    <formly-field v-for="field in fields" :form.sync="form" :model.sync="model" :field="field"></formly-field>
     <slot></slot>
   </fieldset>
 </template>
 
 <script>
  export default {
-     props: ['form', 'customLayout'],
-     created(){
-         //make sure that the 'value' is always set
-         Object.keys(this.form).forEach((key) => {
-             if ( typeof this.form[key].value == 'undefined' ) this.$set('form.'+key+'.value', '');
-         });
-         
-         //set our validation options
-         this.$set('form.$errors', {});
-         this.$set('form.$valid', true);
+   props: ['form', 'model', 'fields'],
+   created(){
 
-         this.$watch('form.$errors', function(val){
-             let valid = true;
-             Object.keys(this.form.$errors).forEach((key)=>{
-                 let errField = this.form.$errors[key];
-                 Object.keys(errField).forEach((errKey) => {
-                     if ( errField[errKey] ) valid = false;
-                 })
-             });
-             this.form.$valid = valid;
-         }, {
-             deep: true
-         });
-     }
+     //make sure that the 'value' is always set
+     this.fields.forEach( field => {
+       if ( typeof this.model[ field.key ] == 'undefined' ) this.$set(this.model, field.key, '');
+     });
+
+     
+     //set our validation options
+     this.$set(this.form, '$errors', {});
+     this.$set(this.form, '$valid', true);
+
+     this.$watch('form.$errors', function(val){
+       let valid = true;
+       Object.keys(this.form.$errors).forEach((key)=>{
+         let errField = this.form.$errors[key];
+         Object.keys(errField).forEach((errKey) => {
+           if ( errField[errKey] ) valid = false;
+         })
+       });
+       this.form.$valid = valid;
+     }, {
+       deep: true
+     });
+     
+   }
  }
 </script>