better schema

Author: matt-sanders

src/components/FormlyField.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="form.fields[key].type" :form.sync="form" :key="key"></component>
+  <component :is="form[key].type" :form.sync="form" :key="key"></component>
 </template>
 
 <script>

src/components/FormlyForm.vue

@@ -1,21 +1,21 @@
 <template>
   <fieldset>
-      <formly-field v-for="field in form.fields" :form.sync="form" :key="$key" ></formly-field>
+      <formly-field v-for="field in form | formlyFields" :form.sync="form" :key="field" ></formly-field>
   </fieldset>
 </template>
 
 <script>
  export default {
      props: ['form'],
      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', false);
-
-         //make sure that the 'value' is always set
-         Object.keys(this.form.fields).forEach((key) => {
-             if ( typeof this.form.fields[key].value == 'undefined' ) this.$set('form.fields.'+key+'.value', '');
-         });
      }
  }
 </script>

src/filters/index.js

@@ -0,0 +1,11 @@
+export default function(Vue){
+    //filter valid formly fields.
+    //this shouldn't pass any $ fields. eg $errors or $valid
+    Vue.filter('formlyFields', (fields) => {
+        let re = /^\$/;
+        let valid = Object.keys(fields).filter( (key) => {
+            return !re.test(key);
+        });
+        return valid;
+    });
+}

src/index.js

@@ -1,9 +1,11 @@
 import Components from './components/index';
+import Filters from './filters/index';
 import Util,{getTypes, addType} from './util';
 
 
 let Formly = {
-    
+    getTypes,
+    addType,
     install(Vue, options){
 
         if ( Formly.installed ){
@@ -12,7 +14,7 @@ let Formly = {
 
         //install our components
         Components(Vue);
-        
+        Filters(Vue);
     }
 };
 

test/unit/specs/FormlyField.spec.js

@@ -25,15 +25,13 @@ describe('FormlyField', () => {
 
         Vue.component('test', {
             props: ['form', 'key'],
-            template: '<div id="testComponent">{{form.fields[key].type}}</div>'
+            template: '<div id="testComponent">{{form[key].type}}</div>'
         });
 
         let data = {
             form:{
-                fields: {
-                    test: {
-                        type: 'test'
-                    }
+                test: {
+                    type: 'test'
                 }
             }
         };
@@ -42,24 +40,22 @@ describe('FormlyField', () => {
 
         let innerElem = vm.$el.querySelector('#testComponent');
 
-        expect(innerElem.textContent).to.contain(data.form.fields.test.type);
+        expect(innerElem.textContent).to.contain(data.form.test.type);
 
     });
 
     it('should mimic the model of the parent', (done) => {
 
         Vue.component('test', {
             props: ['form', 'key'],
-            template: '<input type="text" id="testInput" v-model="form.fields[key].value">'
+            template: '<input type="text" id="testInput" v-model="form[key].value">'
         });
 
         let data = {
             form: {
-                fields: {
-                    search: {
-                        type: 'test',
-                        value: 'foo'
-                    }
+                search: {
+                    type: 'test',
+                    value: 'foo'
                 }
             }
         };
@@ -71,7 +67,7 @@ describe('FormlyField', () => {
         expect(input.value).to.contain('foo');
 
         //change the value and expect a change
-        vm.form.fields.search.value = 'bar';
+        vm.form.search.value = 'bar';
 
         setTimeout(() => {
             expect(input.value).to.equal('bar');

test/unit/specs/FormlyForm.spec.js

@@ -4,12 +4,15 @@ import sinonChai from 'sinon-chai';
 import sinon from 'sinon';
 import Vue from 'vue';
 import FormlyForm from 'src/components/FormlyForm.vue';
+import Filters from 'src/filters/index';
 Vue.component('formly-form', FormlyForm);
 chai.use(sinonChai);
+//install our filters
+Filters(Vue);
 
 //mock our formly-field component
 let FormlyField = Vue.extend({
-    template: '<div class="formly-field"><pre id="{{key}}_field">{{form.fields[key] | json}}</pre><pre id="{{key}}_model">{{form.fields[key].value | json}}</pre></div>',
+    template: '<div class="formly-field"><pre id="{{key}}_field">{{form[key] | json}}</pre><pre id="{{key}}_model">{{form[key].value | json}}</pre></div>',
     props: ['form', 'key']
 });
 
@@ -43,14 +46,12 @@ describe('FormlyForm', () => {
 
         let data = {
             form: {
-                fields: {
-                    fname: {
-                        type: 'input'
-                    },
-                    lname: {
-                        type: 'input',
-                        value: 'smith'
-                    }
+                fname: {
+                    type: 'input'
+                },
+                lname: {
+                    type: 'input',
+                    value: 'smith'
                 }
             }
         };
@@ -63,7 +64,7 @@ describe('FormlyForm', () => {
 
         //check their data
         expect(vm.$el.querySelector('#lname_model').textContent).to.contain('smith');
-        expect(JSON.parse(vm.$el.querySelector('#lname_field').textContent)).to.deep.equal(data.form.fields.lname);
+        expect(JSON.parse(vm.$el.querySelector('#lname_field').textContent)).to.deep.equal(data.form.lname);
         expect(JSON.parse(vm.$el.querySelector('#fname_field').textContent)).to.deep.equal({type: 'input', value: ''});
         expect(data.form.$errors).to.deep.equal({});
         expect(data.form.$valid).to.be.false;
@@ -77,7 +78,7 @@ describe('FormlyForm', () => {
         Vue.component('formly-field', (resolve) =>{
             resolve({
                 props: ['form', 'key'],
-                template: '<component :is="form.fields[key].type"></component>',
+                template: '<component :is="form[key].type"></component>',
                 components: Vue.$formlyFields
             });
         });
@@ -88,10 +89,8 @@ describe('FormlyForm', () => {
 
         let data = {
             form: {
-                fields: {
-                    fname: {
-                        type: 'restricted'
-                    }
+                fname: {
+                    type: 'restricted'
                 }
             }
         };

test/unit/specs/index.spec.js

@@ -9,6 +9,8 @@ describe('module', () => {
     it('module props', () => {
         expect(VueFormly).to.exist;
         expect(VueFormly.install).to.be.a('function');
+        expect(VueFormly.addType).to.be.a('function');
+        expect(VueFormly.getTypes).to.be.a('function');
         expect(addType).to.be.a('function');
         expect(getTypes).to.be.a('function');
         expect(Util.formlyFields).to.be.a('object');
@@ -18,7 +20,8 @@ describe('module', () => {
 
         //mock vue
         window.Vue = {
-            component(){}                
+            component(){},
+            filter(){}
         };
         VueFormly.install(Vue);