在一个嵌套组件中,通过以下步骤来使无效字段高亮和显示验证消息:
1.在嵌套组件的 Razor 文件中引用以下命名空间:using Microsoft.AspNetCore.Components.Forms;
。
2.在嵌套组件中声明一个 EditContext
类型的变量,并在 OnInitialized()
方法中将其初始化:
private EditContext editContext;
protected override void OnInitialized()
{
editContext = new EditContext(Model);
}
3.在嵌套组件中声明一个方法,名称可以为 Validate()
,并在其中调用 editContext.Validate()
方法:
private void Validate()
{
editContext.Validate();
}
4.在嵌套组件的 Razor 文件中,在需要显示验证消息的元素上添加以下代码:
其中,'FieldName”应替换为要显示验证消息的字段名称。
5.在嵌套组件的 Razor 文件中,在需要高亮无效字段的元素上添加以下代码:
class="@((editContext.GetValidationMessages("FieldName")?.Any() ?? false) ? "is-invalid" : null)"
其中,'FieldName”应替换为需要高亮的字段名称。
6.在父组件中,调用步骤 3 中声明的 Validate()
方法以启动验证,并在步骤 4、5 中添加的代码中通过 editContext
传递验证消息以进行高亮和显示。
示例代码:https://github.com/dotnet-presentations/blazor-workshop/tree/master/src/Exercises/ComponentValidation/Completed
参考资料:https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-5.0#nested-components