fix(Form): incorrect validation order when add field dynamically

src/field/index.js

@@ -80,13 +80,13 @@ export default createComponent({
     this.$nextTick(this.adjustSize);
 
     if (this.vanForm) {
-      this.vanForm.fields.push(this);
+      this.vanForm.addField(this);
     }
   },
 
   beforeDestroy() {
     if (this.vanForm) {
-      this.vanForm.fields = this.vanForm.fields.filter(item => item !== this);
+      this.vanForm.removeField(this);
     }
   },
 

src/form/index.js

@@ -1,4 +1,5 @@
 import { createNamespace } from '../utils';
+import { sortChildren } from '../utils/vnodes';
 
 const [createComponent, bem] = createNamespace('form');
 
@@ -124,6 +125,15 @@ export default createComponent({
       });
     },
 
+    addField(field) {
+      this.fields.push(field);
+      sortChildren(this.fields, this);
+    },
+
+    removeField(field) {
+      this.fields = this.fields.filter(item => item !== field);
+    },
+
     getValues() {
       return this.fields.reduce((form, field) => {
         form[field.name] = field.formValue;

src/form/test/index.spec.js

@@ -35,3 +35,41 @@ test('dynamic add/remove fileds', async () => {
   await submitForm(wrapper);
   expect(onSubmit).toHaveBeenCalledWith({ B: '' });
 });
+
+test('dynamic add fileds when validate-first', async () => {
+  const onFailed = jest.fn();
+  const wrapper = mountForm({
+    template: `
+      <van-form validate-first @failed="onFailed">
+        <van-field
+          v-if="show"
+          name="A"
+          value=""
+          :rules="[{ required: true, message: 'A' }]"
+        />
+        <van-field
+          name="B"
+          value=""
+          :rules="[{ required: true, message: 'B' }]"
+        />
+        <van-button native-type="submit" />
+      </van-form>
+    `,
+    data() {
+      return {
+        show: false,
+      };
+    },
+    methods: {
+      onFailed,
+    },
+  });
+
+  await submitForm(wrapper);
+  expect(onFailed.mock.calls[0][0].errors[0].name).toEqual('B');
+
+  wrapper.setData({ show: true });
+
+  await submitForm(wrapper);
+  expect(onFailed.mock.calls[1][0].errors[0].name).toEqual('A');
+});

src/mixins/relation.ts

@@ -1,26 +1,10 @@
-import Vue, { VNode } from 'vue';
+import Vue from 'vue';
+import { sortChildren } from '../utils/vnodes';
 
 type ChildrenMixinOptions = {
   indexKey?: any;
 };
 
-function flattenVNodes(vnodes: VNode[]) {
-  const result: VNode[] = [];
-
-  function traverse(vnodes: VNode[]) {
-    vnodes.forEach(vnode => {
-      result.push(vnode);
-
-      if (vnode.children) {
-        traverse(vnode.children);
-      }
-    });
-  }
-
-  traverse(vnodes);
-  return result;
-}
-
 type ChildrenMixinThis = {
   disableBindRelation?: boolean;
 };
@@ -72,10 +56,8 @@ export function ChildrenMixin(
         }
 
         const children = [...this.parent.children, this];
-        const vnodes = flattenVNodes(this.parent.slots());
+
-        children.sort(
+        sortChildren(children, this.parent);
-          (a, b) => vnodes.indexOf(a.$vnode) - vnodes.indexOf(b.$vnode)
-        );
 
         this.parent.children = children;
       },

src/utils/vnodes.ts

@@ -0,0 +1,25 @@
+/* eslint-disable no-underscore-dangle */
+import { VNode } from 'vue';
+
+function flattenVNodes(vnodes: VNode[]) {
+  const result: VNode[] = [];
+
+  function traverse(vnodes: VNode[]) {
+    vnodes.forEach(vnode => {
+      result.push(vnode);
+
+      if (vnode.children) {
+        traverse(vnode.children);
+      }
+    });
+  }
+
+  traverse(vnodes);
+  return result;
+}
+
+// sort children instances by vnodes order
+export function sortChildren(children: any[], parent: any) {
+  const vnodes = flattenVNodes(parent._vnode.children);
+  children.sort((a, b) => vnodes.indexOf(a.$vnode) - vnodes.indexOf(b.$vnode));
+}