blazor - Blazor：如何滚动到编辑表单中的第一个错误？

Question

我有一个包含大量字段的编辑表单。如果用户出错并尝试提交表单，他们必须手动滚动以查看错误。使用 javascript，可以执行以下操作：

var element = document.getElementById("content");
element.scrollIntoView();

在 blazor 中，如果必须，我可以使用 JS，但我不一定有要滚动到的 ID。

有没有一种好方法可以在提交时滚动到编辑表单中的第一个错误？

Answer 1

这是我如何完成它的。我在 EditForm 上使用 OnInvalidSubmit。我的 ValidationMessage 控件添加了“validation-message”类，所以我滚动到找到的第一条错误消息的父元素，您可能需要根据您的 HTML 向上移动一个额外的节点。

我为我的 Blazor 页面创建了一个类来继承

public class FormBase : ComponentBase
{
    [Inject]
    protected IJSRuntime JSRuntime { get; set; } = null!;

    internal async Task HandleInvalidSubmit()
    {
        await JSRuntime.InvokeVoidAsync("scrollToFirstError");
    }
}

然后在剃刀页面中继承它并将 OnInvalidSubmit 添加到 EditForm

@inherits FormBase

<EditForm EditContext="editContext" OnInvalidSubmit="@HandleInvalidSubmit">

我的 JavaScript 如下。我添加了 500 毫秒的延迟，因此页面有时间在调用 getElementsByClassName 之前添加错误消息

function scrollToFirstError() {

    delay(500).then(() => {

        var element = document.getElementsByClassName("validation-message")[0];
        if (element != null) {
            element.parentNode.scrollIntoView();
        }

    });
}

function delay(time) {
    return new Promise(resolve => setTimeout(resolve, time));
}