Blazor - 如何关注 EditForm 中的第一个无效字段

Question

我在 Blazor 中有一个使用表单验证的表单，如 documentation 中所述。

当用户尝试提交表单，但验证失败时，我想让用户关注第一个无效的 <input> 字段。

这如何在 Blazor WebAssemby 中完成？

Answer 1

您可以使用 OnInvalidSubmit 并访问 EditContext。

<EditForm @ref=editForm OnInvalidSubmit=@FocusFirstError ... 
...
    <InputText @bind-Value=@inputRegisteredUser.GivenName
               @ref=inputGivenName
               class="form-control"
               placeholder="Given Name"
               id="GivenName" />
...

private EditForm editForm;
// repeat for all inputs
private InputText inputGivenName;


private async Task FocusFirstError()
{
    var editContext = editForm.EditContext;
       
    // repeat for all inputs
    if(editContext.GetValidationMessages(() => inputRegisteredUser.GivenName).Any())
    {
        await inputGivenName.Element.Value.FocusAsync();
        return;
    }
}