feat(Form): add prop "scrollToErrorPosition" (#12937)

youzan · Jun 18, 2024 · 1a6d7eb · 1a6d7eb
1 parent 13e5464
commit 1a6d7eb
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/packages/vant/src/form/Form.tsx b/packages/vant/src/form/Form.tsx
@@ -34,6 +34,7 @@ export const formProps = {
   labelAlign: String as PropType<FieldTextAlign>,
   inputAlign: String as PropType<FieldTextAlign>,
   scrollToError: Boolean,
+  scrollToErrorPosition: String as PropType<ScrollLogicalPosition>,
   validateFirst: Boolean,
   submitOnEnter: truthProp,
   showErrorMessage: truthProp,
@@ -177,9 +178,17 @@ export default defineComponent({
         .then(() => emit('submit', values))
         .catch((errors: FieldValidateError[]) => {
           emit('failed', { values, errors });
-
-          if (props.scrollToError && errors[0].name) {
-            scrollToField(errors[0].name);
+          const { scrollToError, scrollToErrorPosition } = props;
+
+          if (scrollToError && errors[0].name) {
+            scrollToField(
+              errors[0].name,
+              scrollToErrorPosition
+                ? {
+                    block: scrollToErrorPosition,
+                  }
+                : undefined,
+            );
           }
         });
     };

diff --git a/packages/vant/src/form/README.md b/packages/vant/src/form/README.md
@@ -502,6 +502,7 @@ export default {
 | required `v4.7.3` | Whether to show required mark | _boolean \| 'auto'_ | `null` |
 | validate-first | Whether to stop the validation when a rule fails | _boolean_ | `false` |
 | scroll-to-error | Whether to scroll to the error field when validation failed | _boolean_ | `false` |
+| scroll-to-error-position | The position when scrolling to the wrong form item, can be set to `center` \| `end` \| `nearest` \| `start` | _string_ | - |
 | show-error | Whether to highlight input when validation failed | _boolean_ | `false` |
 | show-error-message | Whether to show error message when validation failed | _boolean_ | `true` |
 | submit-on-enter | Whether to submit form on enter | _boolean_ | `true` |

diff --git a/packages/vant/src/form/README.zh-CN.md b/packages/vant/src/form/README.zh-CN.md
@@ -534,6 +534,7 @@ export default {
 | required `v4.7.3` | 是否显示表单必填星号 | _boolean \| 'auto'_ | `null` |
 | validate-first | 是否在某一项校验不通过时停止校验 | _boolean_ | `false` |
 | scroll-to-error | 是否在提交表单且校验不通过时滚动至错误的表单项 | _boolean_ | `false` |
+| scroll-to-error-position | 滚动至错误的表单项时的位置，可选值为 `center` \| `end` \| `nearest` \| `start` | _string_ | - |
 | show-error | 是否在校验不通过时标红输入框 | _boolean_ | `false` |
 | show-error-message | 是否在校验不通过时在输入框下方展示错误提示 | _boolean_ | `true` |
 | submit-on-enter | 是否在按下回车键时提交表单 | _boolean_ | `true` |