Merge pull request #84 from Human-Connection/2019/kw19/fix_form_user_input_event

2019/kw19/fix_form_user_input_event

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@human-connection/styleguide",
-  "version": "0.5.16",
+  "version": "0.5.17",
   "private": false,
   "scripts": {
     "serve": "http-server ./docs -o -s",
@@ -71,7 +71,8 @@
   "authors": [
     "appinteractive",
     "roschaefer",
-    "visualjerk"
+    "visualjerk",
+    "ulfgebhardt"
   ],
   "main": "./dist/system.umd.min.js",
   "files": [

src/system/components/data-input/Form/Form.vue

@@ -14,6 +14,8 @@
 import Schema from 'async-validator'
 import cloneDeep from 'clone-deep'
 import dotProp from 'dot-prop'
+// Disable warnings to console
+Schema.warning = function() {}
 
 /**
  * Used for handling complex user input.
@@ -72,11 +74,6 @@ export default {
     },
     validate(cb) {
       const validator = new Schema(this.schema)
-      // Prevent validator from printing to console
-      // eslint-disable-next-line
-      const warn = console.warn
-      // eslint-disable-next-line
-      console.warn = () => {}
       validator.validate(this.newData, errors => {
         if (errors) {
           this.errors = errors.reduce((errorObj, error) => {
@@ -87,8 +84,6 @@ export default {
         } else {
           this.errors = null
         }
-        // eslint-disable-next-line
-        console.warn = warn
         this.notify(this.newData, this.errors)
         if (!errors && cb && typeof cb === 'function') {
           cb()
@@ -114,14 +109,24 @@ export default {
     },
     async update(model, value) {
       dotProp.set(this.newData, model, value)
+      /**
+       * Fires after user input.
+       * Receives the current form data.
+       * The form data is not validated and can be invalid.
+       * This event is fired before the input-valid event.
+       *
+       * @event input
+       */
+      await this.$emit('input', cloneDeep(this.newData))
       this.validate(() => {
         /**
          * Fires after user input.
          * Receives the current form data.
+         * This is only called if the form data is successfully validated.
          *
-         * @event input
+         * @event input-valid
          */
-        this.$emit('input', cloneDeep(this.newData))
+        this.$emit('input-valid', cloneDeep(this.newData))
       })
     },
     reset() {

src/system/components/data-input/Form/demo.md

@@ -52,6 +52,7 @@ Use a schema to provide validation for the form inputs. Use scoped slots to get
     v-model="formData"
     @submit="handleSubmit"
     @input="handleInput"
+    @input-valid="handleInputValid"
     @reset="handleReset"
     :schema="formSchema">
     <template slot-scope="{ errors, reset }">
@@ -65,6 +66,12 @@ Use a schema to provide validation for the form inputs. Use scoped slots to get
         label="Email"
         type="email"
         placeholder="Your email address ..."></ds-input>
+      <ds-input
+        icon="at"
+        model="emailConfirm"
+        label="Confirm Email"
+        type="email"
+        placeholder="Confirm your email address ..."></ds-input>
       <ds-select
         icon="user"
         model="gender"
@@ -87,7 +94,7 @@ Use a schema to provide validation for the form inputs. Use scoped slots to get
           Reset form
         </ds-button>
         <ds-button
-          :disabled="errors"
+          :disabled="disabled"
           icon="save"
           primary>
           Save profile
@@ -113,13 +120,19 @@ Use a schema to provide validation for the form inputs. Use scoped slots to get
         formSchema: {
           name: { required: true, message: 'Fill in a name' },
           email: { type: 'email', required: true, message: 'Fill in a valid email' },
+          emailConfirm: [
+            { validator: this.matchEmail },
+            // the last entry is called first ¯\_(ツ)_/¯
+            { type: 'email', required: true, message: 'Confirm your email'}
+          ],
           settings: {
             type: 'object',
             fields: {
               status: { min: 20, max: 300, message: 'Write between 20 and 300 letters' }
             }
           }
-        }
+        },
+        disabled: true
       }
     },
     methods: {
@@ -128,9 +141,22 @@ Use a schema to provide validation for the form inputs. Use scoped slots to get
       },
       handleInput(data) {
         console.log('Input form ...', data)
+        this.disabled = true
+      },
+      handleInputValid(data) {
+        this.disabled = false
+        console.log('Input-valid form ...', data)
       },
       handleReset(data) {
         console.log('Reset form ...', data)
+      },
+
+      matchEmail(rule, value, callback, source, options) {
+        var errors = [];
+        if(this.formData.email !== value) {
+          errors.push(new Error('EMail missmatch'));
+        }
+        callback(errors);
       }
     }
   }