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

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');
+});