Merge pull request #5 from Infrastructure/feature/form

fix: cannot exec validate rules in the multiple select

demo/components/formDemo.vue

@@ -306,6 +306,17 @@
                 :items="items"
               />
             </n-form-item>
+            <n-form-item
+              prop="mutiSelect.0"
+              label="Select"
+            >
+              <n-select
+                v-model="validateForm.mutiSelect[0]"
+                multiple
+                placeholder="Please Select Type"
+                :items="items"
+              />
+            </n-form-item>
             <n-form-item
               label="Switch"
               prop="switch"
@@ -362,6 +373,17 @@
                   :items="items"
                 />
               </n-form-item>
+              <n-form-item
+                prop="mutiSelect.0"
+                label="Select"
+              >
+                <n-select
+                  v-model="validateForm.mutiSelect[0]"
+                  multiple
+                  placeholder="Please Select Type"
+                  :items="items"
+                />
+              </n-form-item>
               <n-form-item label="Switch" prop="switch">
                 <n-switch v-model="validateForm.switch" />
               </n-form-item>
@@ -390,6 +412,13 @@
             <script>
               export default {
                 data () {
+                  let arrayValidate = (rule, value, callback) => {
+                    if (value.length <= 0) {
+                      callback(new Error('input required'))
+                    } else {
+                      callback()
+                    }
+                  }
                   return {
                     validateForm: {
                       input: "",
@@ -406,6 +435,9 @@
                       input: [
                         { required: true, message: "input cannot be empty", trigger: "blur" }
                       ],
+                      'mutiSelect.0': [
+                        { validator: arrayValidate, trigger: 'change' }
+                      ],
                       "muti.deep.select": [
                         {
                           required: true,
@@ -708,6 +740,13 @@ export default {
         callback()
       }
     }
+    var arrayValidate = (rule, value, callback) => {
+      if (value.length <= 0) {
+        callback(new Error('input required'))
+      } else {
+        callback()
+      }
+    }
     return {
       form: {
         name: '',
@@ -745,6 +784,9 @@ export default {
             select: 'Public'
           }
         },
+        mutiSelect: [
+          []
+        ],
         datepicker: 0,
         switch: false,
         radio: ''
@@ -753,6 +795,9 @@ export default {
         input: [
           { required: true, message: 'input cannot be empty', trigger: 'blur' }
         ],
+        'mutiSelect.0': [
+          { validator: arrayValidate, trigger: 'change' }
+        ],
         'muti.deep.select': [
           {
             required: true,

packages/common/Select/src/MultipleSelect.vue

@@ -134,6 +134,7 @@ import toggleable from '../../../mixins/toggleable'
 import zindexable from '../../../mixins/zindexable'
 import Scrollbar from '../../Scrollbar'
 import clickoutside from '../../../directives/clickoutside'
+import Emitter from '../../../mixins/emitter'
 
 export default {
   name: 'NMultipleSelect',
@@ -144,11 +145,16 @@ export default {
   directives: {
     clickoutside
   },
-  mixins: [detachable, toggleable, placeable, zindexable],
+  mixins: [detachable, toggleable, placeable, zindexable, Emitter],
   model: {
     prop: 'selectedValue',
     event: 'input'
   },
+  inject: {
+    formItem: {
+      default: null
+    }
+  },
   props: {
     items: {
       type: Array,
@@ -227,6 +233,12 @@ export default {
       } else {
         this.label = ''
       }
+    },
+    selectedItems (n) {
+      if (this.formItem) {
+        let vals = n.map(i => i.value)
+        this.dispatch('NFormItem', 'on-form-change', vals)
+      }
     }
   },
   methods: {

styles/Form.scss

@@ -69,8 +69,7 @@
   }
   .n-form-item__validate {
     position: absolute;
-    bottom: -18px;
+    bottom: -22px;
-    margin-top: 6px;
     color: rgba(255, 146, 164, 1);
     font-size: 14px;
   }