How can I invoke EditForm validate method from another method?

Question

What I would like to create:

I would create a Blazor server-side page that contains data. Some of these data are read-only so the user can only see them. Other data can be modified by the user so he will modify them through an EditForm.

I wouldn't insert a submit button inside the EditForm instead, I would like to create a buttons bar that contains some buttons that the user can click. One of them would be Save all button. When the user clicks over it, that button have to call EditForm validate() function to verify if the data contained inside the EditForm is still valid or not.

Is it possible?

<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?
    }
}

enet enet · Accepted Answer · 2020-01-29T19:03:47

This is a working sample, copy and paste it into your Index page component and run it. You should also define this model class:

Comment.cs

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

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

Points to note:

In order to validate your model you have to call the EditContext.Validate method
The Save button is initially disabled...
The code also subscribe to the EditContext's OnFieldChanged event, a method that check the validity of the model. This method is called whenever a field has changed.
When you tab out of the second field, and the model is valid, the Save button is enabled.
Result printed in the output window

hope this helps...

Replace the code in Index.razor with the code below...

<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";
    }
}
}

How can I invoke EditForm validate method from another method?

2 Answers

Comment.cs