Merge pull request #4 from Infrastructure/feature/form

Feature/form

demo/components/formDemo.vue

@@ -281,16 +281,21 @@
               ResetForm Method: only can reset the item with prop.<br>
               ValidateForm Method: support validate specified items by the second parameter in form of array.<br>
             </n-form-item>
-            <n-form-item
-              :required-logo="false"
-              prop="input"
-              label="Input"
-            >
-              <n-input
-                v-model="validateForm.input"
-                placeholder="Enter string"
-              />
-            </n-form-item>
+            <n-popover>
+              <template v-slot:activator>
+                <n-form-item
+                  :required-logo="false"
+                  prop="input"
+                  label="Input"
+                >
+                  <n-input
+                    v-model="validateForm.input"
+                    placeholder="Enter string"
+                  />
+                </n-form-item>
+              </template>
+              <span>Test nesting formItem in resetForm</span>
+            </n-popover>
             <n-form-item
               prop="muti.deep.select"
               label="Select"
@@ -734,7 +739,7 @@ export default {
         }
       ],
       validateForm: {
-        input: 'input',
+        input: '',
         muti: {
           deep: {
             select: 'Public'

packages/common/Form/src/main.vue

@@ -68,30 +68,34 @@ export default {
      * @param {Array} scope  to specify the scope of validation
      * @return {Boolean} validation passed or not
      */
-    validate (cb, scope = []) {
+    validate (cb, scope = [], target = this) {
       let promise
       let isCallback = typeof cb === 'function'
       if (!isCallback && window.Promise) {
         promise = new Promise((resolve, reject) => {
-          cb = valid => valid ? resolve(valid) : reject(valid)
+          cb = (valid) => valid ? resolve(valid) : reject(valid)
         })
       }
       let valid = true
       let fields = {}
-      this.$children.forEach((child, i) => {
+      for (let i = 0; i < target.$children.length; i++) {
+        let child = target.$children[i]
+        let componentName = child.$options.name
         let flag = scope.length > 0 ? scope.indexOf(child.prop) > -1 : true
-        if (child.prop && flag) {
+        if (componentName === 'NFormItem' && child.prop && flag) {
           child.validate('', (errors, field) => {
             if (errors) {
               valid = false
             }
             fields = Object.assign({}, fields, field)
           })
+        } else if (['NFormItem', 'NForm'].indexOf(componentName) === -1) {
+          this.validate(null, [], child)
         }
-        if (++i === this.$children.length && isCallback) {
+        if (i === target.$children.length - 1 && isCallback) {
           cb(valid, fields)
         }
-      })
+      }
 
       if (promise) {
         return promise
@@ -100,24 +104,28 @@ export default {
     /**
      * just can reset the value with prop in form-item
      */
-    resetForm () {
-      this.$children.forEach(child => {
-        if (child.prop) {
+    resetForm (target = this) {
+      for (let i = 0; i < target.$children.length; i++) {
+        let child = target.$children[i]
+        let componentName = child.$options.name
+        if (componentName === 'NFormItem' && child.prop) {
           let keys = child.prop.split('.')
           let obj = this.model
           let j = 0
-          keys.forEach((k, i) => {
-            if (i !== keys.length - 1) {
-              obj = obj[k]
+          keys.forEach((m, n) => {
+            if (n !== keys.length - 1) {
+              obj = obj[m]
             }
-            j = i
+            j = n
           })
           obj[keys[j]] = getObjValue(this.initialValue, keys)
           if (child.validateFlag) {
             child.clearValidateClass()
           }
+        } else if (['NFormItem', 'NForm'].indexOf(componentName) === -1) {
+          this.resetForm(child)
         }
-      })
+      }
     }
   }
 }