Merge pull request #43 from 14nrv/dev

Fix: add required rule

README.md

@@ -74,10 +74,10 @@ Object.keys(rules).forEach(rule => {
 ```html
 <template lang="pug">
   #app.section
-    form-json(:formFields="jsonFields",
-              :formName="'userProfil'"
+    form-json(:btnReset="{value: 'Reset'}",
               :btnSubmit="{value: 'Submit'}",
-              :btnReset="{value: 'Reset'}")
+              :formFields="jsonFields",
+              formName="userProfil")
       div(slot="slotNameAddedInJsonFields")
         p Your slot content
 </template>
@@ -91,11 +91,11 @@ Object.keys(rules).forEach(rule => {
     components: {
       formJson
     },
-    data: () => ({
-      jsonFields
-    }),
     mounted () {
       this.$root.$on('formSubmitted', values => alert(JSON.stringify(values)))
+    },
+    computed: {
+      jsonFields: () => jsonFields
     }
   }
 </script>

src/App.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
   #app.section
-    app-form(:formFields="jsonFields",
-             formName="userProfil",
+    app-form(:btnReset="{value: 'Reset'}",
              :btnSubmit="{value: 'Submit'}",
-             :btnReset="{value: 'Reset'}")
+             :formFields="jsonFields",
+             formName="userProfil")
       div(slot="boxSlot")
         .box
           article
@@ -24,11 +24,11 @@ export default {
   components: {
     appForm: Form
   },
-  data: () => ({
-    jsonFields
-  }),
   mounted () {
     this.$root.$on('formSubmitted', values => alert(JSON.stringify(values)))
+  },
+  computed: {
+    jsonFields: () => jsonFields
   }
 }
 </script>

src/components/Fields/Control.vue

@@ -69,6 +69,8 @@ export default {
     },
     getRules () {
       const { rules = {}, pattern } = this.item
+      rules.required = this.item.isRequired !== false
+
       let validation
       pattern && (validation = { regex: new RegExp(pattern) })
       return { ...rules, ...validation }

src/components/Form/Form.spec.js

@@ -275,6 +275,13 @@ describe('Form', () => {
       expect($inputSubmit).toHaveAttribute('disabled', 'disabled')
     })
 
+    it('has submit btn disabled if no default value in field', async () => {
+      await wrapper.setProps({ formFields: [{ label: 'a label' }] })
+      await flush()
+
+      expect($inputSubmit).toHaveAttribute('disabled', 'disabled')
+    })
+
     it('enables submit input if all fields are valid', async () => {
       await flush()
       expect($inputSubmit).toHaveAttribute('disabled', 'disabled')

src/components/Form/fields.json

@@ -22,7 +22,10 @@
   [
     {
       "label": "Email",
-      "type": "email"
+      "type": "email",
+      "rules": {
+        "email": true
+      }
     },
     {
       "label": "Phone Number",