fix: fix validator in input-number and switch and add some code demo

demo/components/formDemo.vue

@@ -271,6 +271,7 @@
             ref="form-validate"
             :model="validateForm"
             :rules="validateRules"
+            :label-width="100"
           >
             <n-form-item
               label="Warning"
@@ -296,6 +297,15 @@
               </template>
               <span>Test nesting formItem in resetForm</span>
             </n-popover>
+            <n-form-item
+              prop="inputNumber"
+              label="InputNumber"
+            >
+              <n-input-number
+                v-model="validateForm.inputNumber"
+                placeholder="n-input-number"
+              />
+            </n-form-item>
             <n-form-item
               prop="muti.deep.select"
               label="Select"
@@ -365,6 +375,15 @@
               <n-form-item prop="input" label="Input">
                 <n-input v-model="validateForm.input" placeholder="Enter string" />
               </n-form-item>
+              <n-form-item
+                prop="inputNumber"
+                label="InputNumber"
+              >
+                <n-input-number
+                  v-model="validateForm.inputNumber"
+                  placeholder="n-input-number"
+                />
+              </n-form-item>
               <n-form-item prop="muti.deep.select" label="Select">
                 <n-select
                   size="small"
@@ -419,9 +438,22 @@
                       callback()
                     }
                   }
+                  var inputNumberValidate = (rule, value, callback) => {
+                    console.log('blur', value)
+                    callback()
+                  }
+                  var inputNumberValidateChange = (rule, value, callback) => {
+                    console.log('change', value)
+                    callback()
+                  }
+                  var switchValidate = (rule, value, callback) => {
+                    console.log('switch change', value)
+                    callback()
+                  }
                   return {
                     validateForm: {
                       input: "",
+                      inputNumber: undefined,
                       muti: {
                         deep: {
                           select: ""
@@ -432,6 +464,14 @@
                       radio: ""
                     },
                     validateRules: {
+                      switch: [
+                        { validator: switchValidate, trigger: 'change' }
+                      ],
+                      inputNumber: [
+                        { required: true, message: 'input cannot be empty', trigger: 'blur' },
+                        { validator: inputNumberValidate, trigger: 'blur' },
+                        { validator: inputNumberValidateChange, trigger: 'change' }
+                      ],
                       input: [
                         { required: true, message: "input cannot be empty", trigger: "blur" }
                       ],
@@ -747,6 +787,18 @@ export default {
         callback()
       }
     }
+    var inputNumberValidate = (rule, value, callback) => {
+      console.log('blur', value)
+      callback()
+    }
+    var inputNumberValidateChange = (rule, value, callback) => {
+      console.log('change', value)
+      callback()
+    }
+    var switchValidate = (rule, value, callback) => {
+      console.log('switch change', value)
+      callback()
+    }
     return {
       form: {
         name: '',
@@ -779,6 +831,7 @@ export default {
       ],
       validateForm: {
         input: '',
+        inputNumber: undefined,
         muti: {
           deep: {
             select: 'Public'
@@ -792,6 +845,14 @@ export default {
         radio: ''
       },
       validateRules: {
+        switch: [
+          { validator: switchValidate, trigger: 'change' }
+        ],
+        inputNumber: [
+          { type: 'number', required: true, message: 'input cannot be empty', trigger: 'blur' },
+          { validator: inputNumberValidate, trigger: 'blur' },
+          { validator: inputNumberValidateChange, trigger: 'change' }
+        ],
         input: [
           { required: true, message: 'input cannot be empty', trigger: 'blur' }
         ],

packages/common/Input/src/main.vue

@@ -75,9 +75,6 @@ export default {
   },
   mixins: [ Emitter ],
   inject: {
-    form: {
-      default: null
-    },
     formItem: {
       default: null
     }
@@ -129,11 +126,6 @@ export default {
       isComposing: false
     }
   },
-  computed: {
-    validateState () {
-      return this.formItem ? this.formItem.validateState : ''
-    }
-  },
   methods: {
     handleCompositionStart () {
       this.isComposing = true

packages/common/InputNumber/src/main.vue

@@ -38,6 +38,7 @@
 
 <script>
 import NIcon from '../../Icon/index'
+import Emitter from '../../../mixins/emitter'
 
 const DEFAULT_STEP = 1
 
@@ -59,6 +60,12 @@ export default {
   components: {
     NIcon
   },
+  mixins: [ Emitter ],
+  inject: {
+    formItem: {
+      default: null
+    }
+  },
   props: {
     value: {
       type: Number,
@@ -122,6 +129,7 @@ export default {
         }
       }
       this.$emit('change', newValue, oldValue)
+      this.formBlur('change', newValue)
       /**
        * newValue === oldValue won't trigger watcher!
        * so the call stack won't fall in loop
@@ -139,6 +147,11 @@ export default {
     }
   },
   methods: {
+    formBlur (type, val) {
+      if (this.formItem) {
+        this.dispatch('NFormItem', 'on-form-' + type, val)
+      }
+    },
     add () {
       if (this.value === null) {
         this.$emit('input', this.aValidValue)
@@ -159,6 +172,7 @@ export default {
       const value = e.target.value
       if (value === '') {
         this.$emit('input', null)
+        this.formBlur('blur', value)
         return
       }
       const parsedNumber = Number(value)
@@ -168,6 +182,7 @@ export default {
         const valueAfterChange = parsedNumber
         this.$emit('input', valueAfterChange)
       }
+      this.formBlur('blur', parsedNumber)
     }
   }
 }

packages/common/Switch/src/main.vue

@@ -11,8 +11,16 @@
 </template>
 
 <script>
+import Emitter from '../../../mixins/emitter'
+
 export default {
   name: 'NSwitch',
+  mixins: [ Emitter ],
+  inject: {
+    formItem: {
+      default: null
+    }
+  },
   model: {
     prop: 'active',
     event: 'change'
@@ -31,6 +39,9 @@ export default {
     handleClick () {
       if (!this.disabled) {
         this.$emit('change', !this.active)
+        if (this.formItem) {
+          this.dispatch('NFormItem', 'on-form-change', !this.active)
+        }
       }
     }
   }