From b8818cef8c913f84dd19f09c0f8743d8201e4867 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Thu, 20 Feb 2020 20:15:29 +0800
Subject: [PATCH] feat(Form): add scroll-to-error prop (#5680)

---
 src/form/README.md          |  5 +++--
 src/form/README.zh-CN.md    |  5 +++--
 src/form/index.js           |  5 +++++
 src/form/test/props.spec.js | 19 ++++++++++++++++++-
 4 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/form/README.md b/src/form/README.md
index 70863cb54..1ba18bd49 100644
--- a/src/form/README.md
+++ b/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 
 
diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md
index 7e2c19a50..2eb97b399 100644
--- a/src/form/README.zh-CN.md
+++ b/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)
 
diff --git a/src/form/index.js b/src/form/index.js
index 8ce4aea4d..12ec51a8e 100644
--- a/src/form/index.js
+++ b/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);
+          }
         });
     },
   },
diff --git a/src/form/test/props.spec.js b/src/form/test/props.spec.js
index 88460f98c..ebd763339 100644
--- a/src/form/test/props.spec.js
+++ b/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);
+});