如何从另一个方法调用 EditForm 验证方法？

Question

我想创建的内容：

我会创建一个包含数据的 Blazor 服务器端页面。其中一些数据是只读的，因此用户只能看到它们。用户可以修改其他数据，因此他将通过 EditForm 修改它们。

我不会在 EditForm 中插入 提交按钮，我想创建一个按钮栏，其中包含一些用户可以单击的按钮。其中之一是 全部保存 按钮。当用户点击它时，该按钮必须调用 EditForm validate() 函数来验证 EditForm 中包含的数据是否仍然有效。

可能吗？

<button @onclick="Foo">click me</button>

<EditForm Model="@_exampleModel" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText id="name" @bind-Value="_exampleModel.Name" />
</EditForm>

@code {
    private ExampleModel _exampleModel = new ExampleModel();

    private void HandleValidSubmit()
    {
        Console.WriteLine("OnValidSubmit");
    }

    private void Foo() 
    {
        //how can I call EditForm validate method?
    }
}

Answer 1

您可以这样设置 EditContext of your EditForm：

<button @onclick="Foo">click me</button>

<EditForm EditContext="_editContext" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText id="name" @bind-Value="_exampleModel.Name" />
</EditForm>

@code {
    private ExampleModel _exempleModel = new ExampleModel();
    private EditContext _editContext;

    protected override OnInitialized()
    {
        _editContext = new EditContext(_exempleModel);
        base.OnInitialized();
    }

    private void HandleValidSubmit()
    {
        Console.WriteLine("OnValidSubmit");
    }

    private void Foo() 
    {
        //how can I call EditForm validate method?
        if (_editContext.Validate())
        {            
            // TODO: Add the code to persist your model
        }
    }
}

Answer 2

这是一个工作示例，将其复制并粘贴到您的索引页面组件中，然后运行。您还应该定义此模型 class:

Comment.cs

public class Comment
    {
        [Required]
        [MaxLength(10)]
        public string Name { get; set; }

        [Required]
        public string Text { get; set; }
    }

注意事项：

为了验证您的模型，您必须调用 EditContext.Validate 方法
保存按钮最初是禁用的...
该代码还订阅了 EditContext 的 OnFieldChanged 事件，这是一种检查模型有效性的方法。只要字段发生更改，就会调用此方法。
当您跳出第二个字段且模型有效时，“保存”按钮将启用。
输出中打印的结果window

希望这对您有所帮助...

用下面的代码替换Index.razor中的代码...

<h1>My articles</h1>

<p>Leave me a comment</p>

<EditForm EditContext="@EditContext">
    <DataAnnotationsValidator />

    <div class="form-group">
    <label for="name">Name: </label>
    <InputText Id="name" Class="form-control" @bind-Value="@Model.Name"> 
    </InputText>
    <ValidationMessage For="@(() => Model.Name)" />
     </div>
    <div class="form-group">
    <label for="body">Text: </label>
    <InputTextArea Id="body" Class="form-control" @bind-Value="@Model.Text"> 
     </InputTextArea>
    <ValidationMessage For="@(() => Model.Text)" />
</div>

</EditForm>
<p>
    <button>Action 1</button>
    <button>Action 2</button>
    <button disabled="@Disabled" @onclick="Save">Save</button>
</p>

 @code
 {
     private EditContext EditContext;
     private Comment Model = new Comment();

     protected string Disabled { get; set; } = "disabled";

     private async Task Save ()
    {
        await Task.Delay(3000);
        Console.WriteLine("Saving...");
        Console.WriteLine(Model.Name);
        Console.WriteLine(Model.Text);
    }

    protected override void OnInitialized()
   {
       EditContext = new EditContext(Model);
       EditContext.OnFieldChanged += EditContext_OnFieldChanged;

       base.OnInitialized();
   }

   protected override void OnAfterRender(bool firstRender)
   {
       base.OnAfterRender(firstRender);

       SetSaveDisabledStatus();
   }

private void EditContext_OnFieldChanged(object sender, FieldChangedEventArgs 
                                                                          e)
{
    SetSaveDisabledStatus();
}

private void SetSaveDisabledStatus()
{
    if (EditContext.Validate())
    {
        Disabled = null;
    }
    else
    {
        Disabled = "disabled";
    }
}
}

如何从另一个方法调用 EditForm 验证方法？

How can I invoke EditForm validate method from another method?

blazor

blazor-server-side

Comment.cs