时间戳

首页 > 解决方案 > 如何访问 EditForm 中单个字段的验证？

blazor - 如何访问 EditForm 中单个字段的验证？

问题描述

我想根据<EditForm />.

我的简化形式看起来像这样

<EditForm Model="Registration" OnValidSubmit="Submit">
    <label for="input-username">Username</label>
    <InputText id="input-username" 
               type="text" 
               class="???" 
               @bind-Value="Registration.Username" />
    <p>
        <ValidationMessage For="@(() => Registration.Username)" />
    </p>
</EditForm>

我的表单有比这个更多的字段，所以我只想过滤验证Registration.Username，只编辑 .css 类#input-username。

标签： blazorblazor-client-sideblazor-webassemblyasp.net-blazor

解决方案

您可以订阅 EditContext 对象的 OnFieldChanged 事件，找出哪个字段已更改并采取相应措施。

<EditForm EditContext="EditContext" OnValidSubmit="Submit">
    <DataAnnotationsValidator />

     <label for="input-username">Username</label>
    <InputText id="input-username" type="text" class="MyUsername" 
               @bind-Value="Registration.Username" />
    <p>
        <ValidationMessage For="@(() => Registration.Username)" />
    </p>
            <button type="submit">Submit</button>
        
</EditForm>

@code
{
    private Registration Model = new Registration();
    private EditContext EditContext;
    private string MyUsername = "InitialCssClass";

    protected override void OnInitialized()
    {
        EditContext = new EditContext(Model);

        EditContext.OnFieldChanged += EditContext_OnFieldChanged;

    }

    private void EditContext_OnFieldChanged(object sender, 
                                         FieldChangedEventArgs e)
    {
         if (e.FieldIdentifier.FieldName == nameof(Model.Username))
         {
             MyUsername = "Set here a new class name, etc.";
         }
    }
}

推荐阅读