feat(Form): add scroll-to-error prop (#5680)

src/form/README.md

@@ -409,9 +409,10 @@ export default {
 | label-align | Field label align, can be set to `center` `right` | *string* | `left` |
 | input-align | Field input align, can be set to `center` `right` | *string* | `left` |
 | error-message-align | Error message align, can be set to `center` `right` | *string* | `left` |
-| colon | Whether to display `:` after label | *boolean* | *false* |
-| validate-first | Whether to stop the validation when a rule fails | *boolean* | `false` |
 | validate-trigger `v2.5.2` | When to validate the form，can be set to `onChange`、`onSubmit` | *string* | `onBlur` |
+| colon | Whether to display `:` after label | *boolean* | `false` |
+| validate-first | Whether to stop the validation when a rule fails | *boolean* | `false` |
+| scroll-to-error `v2.5.2` | Whether to scroll to the error field when submit failed | *boolean* | `false` |
 
 ### Data Structure of Rule 
 

src/form/README.zh-CN.md

@@ -441,9 +441,10 @@ export default {
 | label-align | 表单项 label 对齐方式，可选值为 `center` `right` | *string* | `left` |
 | input-align | 输入框对齐方式，可选值为 `center` `right` | *string* | `left` |
 | error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | *string* | `left` |
-| colon | 是否在 label 后面添加冒号 | *boolean* | *false* |
-| validate-first | 是否在某一项校验不通过时停止校验 | *boolean* | `false` |
 | validate-trigger `v2.5.2` | 表单校验触发时机，可选值为`onChange` | *string* | `onBlur` |
+| colon | 是否在 label 后面添加冒号 | *boolean* | `false` |
+| validate-first | 是否在某一项校验不通过时停止校验 | *boolean* | `false` |
+| scroll-to-error `2.5.2` | 是否在提交表单且校验不通过时滚动至错误的表单项 | *boolean* | `false` |
 
 > 表单项的 API 参见：[Field 组件](#/zh-CN/field#api)
 

src/form/index.js

@@ -8,6 +8,7 @@ export default createComponent({
     labelWidth: [Number, String],
     labelAlign: String,
     inputAlign: String,
+    scrollToError: Boolean,
     validateFirst: Boolean,
     errorMessageAlign: String,
     validateTrigger: {
@@ -140,6 +141,10 @@ export default createComponent({
             values,
             errors,
           });
+
+          if (this.scrollToError) {
+            this.scrollToField(errors[0].name);
+          }
         });
     },
   },

src/form/test/props.spec.js

@@ -1,4 +1,4 @@
-import { later } from '../../../test';
+import { later, mockScrollIntoView } from '../../../test';
 import { mountForm, submitForm, getSimpleRules } from './shared';
 
 test('rules prop - execute order', async () => {
@@ -268,3 +268,20 @@ test('validate-trigger - custom trigger in rules', async () => {
     wrapper.element.querySelectorAll('.van-field__error-message').length
   ).toEqual(2);
 });
+
+test('scroll-to-error prop', async () => {
+  const fn = mockScrollIntoView();
+  const wrapper = mountForm({
+    template: `
+      <van-form scroll-to-error>
+        <van-field name="A" :rules="rulesA" value="" />
+        <van-button native-type="submit" />
+      </van-form>
+    `,
+    data: getSimpleRules,
+  });
+
+  await submitForm(wrapper);
+
+  expect(fn).toHaveBeenCalledTimes(1);
+});