526互联

解决antd form表单校验错误时，设置scrollToFirstError 不能滚动到第一个校验错误位置

发布时间 2023-05-08 18:32:20作者: anin

使用antd form表单自带属性scrollToFirstError校验不通过时自动滚动到第一个校验错误位置，但是经常没有效果，手动实现一个滚动方法来处理

// 表单滚动到第一个报错处（antd）
export const scrollToFirstError = () => {
    document.querySelector('.ant-form-item-has-error')?.scrollIntoView({behavior: 'smooth', block: 'center'});
};

 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。WEB API链接

  • behavior定义过渡动画，默认值为auto。

    • auto，表示没有平滑的滚动动画效果。
    • smooth，表示有平滑的滚动动画效果。

  • block定义垂直方向的对齐，默认值为start。

    • start，表示顶端对齐。
    • center，表示中间对齐。
    • end，表示底端对齐。

    • nearest：

      • 如果元素完全在视口内，则垂直方向不发生滚动。
      • 如果元素未能完全在视口内，则根据最短滚动距离原则，垂直方向滚动父级容器，使元素完全在视口内。

  • inline定义水平方向的对齐，默认值为nearest。

    • start，表示左端对齐。
    • center，表示中间对齐。
    • end，表示右端对齐。

    • nearest：

      • 如果元素完全在视口内，则水平方向不发生滚动。
      • 如果元素未能完全在视口内，则根据最短滚动距离原则，水平方向滚动父级容器，使元素完全在视口内。

alignToTop

  • 当传入参数true时，相当于{behavior: 'auto', block: 'start', inline: 'nearest'}
  • 当传入参数false时，相当于{behavior: 'auto', block: 'end', inline: 'nearest'}
当未传入参数时，默认值为：{behavior: 'auto', block: 'start', inline: 'nearest'}

例子

const element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({ block: "end" });
element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });

具体使用

在表单校验失败的catch事件中调用滚动方法

 form.validateFields()
            .then((values) => {
                //校验成功逻辑
            })
            .catch(scrollToFirstError);