added the new schema type

Author: matt-sanders

src/components/FormlyField.vue

@@ -1,12 +1,12 @@
 <template>
-  <component :is="field.type" :model.sync="model" :field="field"></component>
+  <component :is="form.fields[key].type" :form.sync="form" :key="key"></component>
 </template>
 
 <script>
  const Vue = require('vue');
  import Util, {getTypes} from '../util';
  export default {
-     props: ['field', 'model'],
+     props: ['form', 'key'],
      components: getTypes()
   }
 </script>

src/components/FormlyForm.vue

@@ -1,11 +1,21 @@
 <template>
   <fieldset>
-      <formly-field v-for="field in fields" :field="field" :model.sync="model[field.key]" ></formly-field>
+      <formly-field v-for="field in form.fields" :form.sync="form" :key="$key" ></formly-field>
   </fieldset>
 </template>
 
 <script>
  export default {
-     props: ['fields', 'model']
+     props: ['form'],
+     created(){
+         //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>

test/unit/specs/FormlyField.spec.js

@@ -24,46 +24,54 @@ describe('FormlyField', () => {
     it('should take on the type of another component', () => {
 
         Vue.component('test', {
-            props: ['field'],
-            template: '<div id="testComponent">{{field.type}}</div>'
+            props: ['form', 'key'],
+            template: '<div id="testComponent">{{form.fields[key].type}}</div>'
         });
 
         let data = {
-            schema:{
-                type: 'test'
+            form:{
+                fields: {
+                    test: {
+                        type: 'test'
+                    }
+                }
             }
         };
 
-        createForm('<formly-field :field="schema"></formly-field>', data);
+        createForm('<formly-field :form="form" key="test"></formly-field>', data);
 
         let innerElem = vm.$el.querySelector('#testComponent');
 
-        expect(innerElem.textContent).to.contain(data.schema.type);
+        expect(innerElem.textContent).to.contain(data.form.fields.test.type);
 
     });
 
     it('should mimic the model of the parent', (done) => {
 
         Vue.component('test', {
-            props: ['model'],
-            template: '<input type="text" id="testInput" v-model="model">'
+            props: ['form', 'key'],
+            template: '<input type="text" id="testInput" v-model="form.fields[key].value">'
         });
 
         let data = {
-            schema: {
-                type: 'test'
-            },
-            testModel: 'foo'
+            form: {
+                fields: {
+                    search: {
+                        type: 'test',
+                        value: 'foo'
+                    }
+                }
+            }
         };
 
-        createForm('<formly-field :field="schema" :model.sync="testModel"></formly-field>', data);
+        createForm('<formly-field :form.sync="form" key="search"></formly-field>', data);
 
         let input = vm.$el.querySelector('#testInput');
 
         expect(input.value).to.contain('foo');
 
         //change the value and expect a change
-        vm.testModel = 'bar';
+        vm.form.fields.search.value = 'bar';
 
         setTimeout(() => {
             expect(input.value).to.equal('bar');

test/unit/specs/FormlyForm.spec.js

@@ -9,14 +9,13 @@ chai.use(sinonChai);
 
 //mock our formly-field component
 let FormlyField = Vue.extend({
-    template: '<div class="formly-field"><pre id="{{field.key}}_field">{{field | json}}</pre><pre id="{{field.key}}_model">{{model | json}}</pre></div>',
-    props: ['field', 'model']
+    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>',
+    props: ['form', 'key']
 });
 
 //our formly specific field
 let FormlyRestrictedField = Vue.extend({
-    template: '<div class="restricted-field"></div>',
-    props: ['field', 'model']
+    template: '<div class="restricted-field"></div>'
 });
 
 
@@ -43,31 +42,31 @@ describe('FormlyForm', () => {
     it('should create a subset of components with the right data', () => {
 
         let data = {
-            schema: [
-                {
-                    key: 'fname',
-                    type: 'input'
-                },
-                {
-                    key: 'lname',
-                    type: 'input'
+            form: {
+                fields: {
+                    fname: {
+                        type: 'input'
+                    },
+                    lname: {
+                        type: 'input',
+                        value: 'smith'
+                    }
                 }
-            ],
-            model: {
-                fname: '',
-                lname: 'smith'
             }
         };
 
-        createForm('<formly-form :fields="schema" :model="model"></formly-form>', data);
+        createForm('<formly-form :form="form"></formly-form>', data);
 
         //check the elements have been created
         expect(vm.$el.querySelectorAll('fieldset')).to.be.length(1);
         expect(vm.$el.querySelectorAll('.formly-field')).to.be.length(2);
 
         //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.schema[1]);
+        expect(JSON.parse(vm.$el.querySelector('#lname_field').textContent)).to.deep.equal(data.form.fields.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,8 +76,8 @@ describe('FormlyForm', () => {
         //re-create the formly field
         Vue.component('formly-field', (resolve) =>{
             resolve({
-                props: ['field', 'model'],
-                template: '<component :is="field.type"></component>',
+                props: ['form', 'key'],
+                template: '<component :is="form.fields[key].type"></component>',
                 components: Vue.$formlyFields
             });
         });
@@ -88,17 +87,15 @@ describe('FormlyForm', () => {
         };
 
         let data = {
-            schema: [
-                {
-                    key: 'fname',
-                    type: 'restricted'
+            form: {
+                fields: {
+                    fname: {
+                        type: 'restricted'
+                    }
                 }
-            ],
-            model: {
-                fname: ''
             }
         };
-        createForm('<formly-form :fields="schema" :model="model"></formly-form><restricted></restricted>', data);
+        createForm('<formly-form :form="form"></formly-form><restricted></restricted>', data);
 
         expect(console.error).to.be.called.once;
         expect(vm.$el.querySelectorAll('.restricted-field')).to.be.length(1);