Blazor 应用程序,如何添加模型状态验证错误?

xam*_*m86 10 blazor blazor-server-side blazor-client-side

如何在 SaveItem 事件中添加自定义验证消息(最好不要使用数据注释)?它应该显示在“ValidationMessage For=”上下文中。

@using System.ComponentModel.DataAnnotations
@page "/edititem"


<EditForm Model="@model" OnSubmit="@Submit" OnValidSubmit="@SaveItem">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText id="ItemName" @bind-Value="@model.ItemName" />
    <ValidationMessage For="@(() => model.ItemName)" />
    <button type="submit">Submit</button>
</EditForm>

@code {
    ItemModel model = new ItemModel();

    private void Submit()
    {

    }
    private void SaveItem()
    {


    }

    public class ItemModel
    {
        [Required]
        public string ItemName{ get; set; }
    }
}
Run Code Online (Sandbox Code Playgroud)

Gio*_*mio 5

<EditForm EditContext="editContext" OnSubmit="@Submit" 
     OnValidSubmit="@SaveItem">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <InputText id="ItemName" @bind-Value="@model.ItemName" />
    <ValidationMessage For="@(() => model.ItemName)" />
    <button type="submit">Submit</button>
</EditForm>

@code {
    private EditContext? editContext;
    private ValidationMessageStore? messageStore;
    ItemModel model = new ItemModel();

    protected override void OnInitialized()
    {
        editContext = new EditContext(model);

        messageStore = new(editContext);
    }

    private void Submit()
    {

    }
    private void SaveItem()
    {
        messageStore.Add(() => model.ItemName, "ItemName invalid");
    }

    public class ItemModel
    {
        [Required]
        public string ItemName{ get; set; }
    }
}
Run Code Online (Sandbox Code Playgroud)

要实现外部数据属性的自定义验证,请遵循以下 3 个步骤:

  1. 在页面中声明一个 EditContext 和一个 ValidationMessageStore 对象;
  2. 将您的表单绑定到 EditContext 实例(在您的情况下,您必须删除 Model 属性);
  3. 执行自定义验证并显示将项目添加到 messageStore 对象时的错误;


Ngu*_*iên 1

您可以通过添加一些包含错误消息的组件来在服务器端添加自定义验证。 显示来自服务器的验证错误