How Can I Clear/Reset Editform Data

[Tom Johnes]

Hello !

Please tell me How Can I Clear/Reset all data from an Editform ?

I tried with resetting the form's model to a new one but no luck...
Can you help me, please ?
Thank You and Best Regards !

Here is my code for Blazor page :

@page "/Test/ResetEditformPage"

@using System.ComponentModel.DataAnnotations;
@using BlazorExample.Shared @* THE PROJECT WHERE THE DATA FOR CUSTOMERS IS FOUND *@


<EditForm Model="cust" OnValidSubmit="OnFormValid" OnInvalidSubmit="OnFormInValid">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="mb-2">
<SfTextBox ID="name"
@bind-Value="@cust.name" ShowClearButton="true" placeholder="Enter Name">
</SfTextBox>
</div>
<div class="mb-2">
<SfTextBox ID="address"
@bind-Value="@cust.address" ShowClearButton="true" placeholder="Enter address">
</SfTextBox>
</div>
<div class="mb-2">
<SfTextBox ID="zip"
@bind-Value="@cust.zip" ShowClearButton="true" placeholder="Enter Zipcode">
</SfTextBox>
</div>
<div class="mb-2">
<SfTextBox ID="email"
@bind-Value="@cust.email" ShowClearButton="true" placeholder="Enter email">
</SfTextBox>
</div>
<div class="mb-2">
<InputNumber id="age" @bind-Value="cust.age" placeholder="Enter Age"></InputNumber>
</div>
<div class="mb-2">
<InputDate id="birthdate" @bind-Value="cust.birthdate" placeholder="Enter DOB"></InputDate>
</div>
<div class="mb-2">
<label><InputCheckbox id="married" @bind-Value="cust.married"></InputCheckbox> Married?</label>
</div>
<div class="mb-2">
<InputSelect id="color" @bind-Value="cust.color">
<option value="" selected>Select favorite color...</option>
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
</InputSelect>
</div>
<button>SUBMIT</button>


<SfButton CssClass="e-info" IsPrimary=false
@onclick="ClearFormData_Click">CLEAR FORM DATA
   </SfButton>




</EditForm>


@code {
CustomerModel cust = new CustomerModel() { birthdate = DateTime.Now.AddYears(-1) };


private void OnFormValid()
{
Console.WriteLine("FORM SUBMITTED; GOOD JOB");
}


private void OnFormInValid()
{
Console.WriteLine("FORM INVALID; KEEP TRYING");
}


private async Task ClearFormData_Click()
{
CustomerModel cust = new CustomerModel() { birthdate = DateTime.Now.AddYears(-1) };
}
}

Here is my code for Blazor Model :

    [Serializable]

    public class CustomerModel

    {

            public string id { get; set; }

            [Required(ErrorMessage = "Name is required.")]

            [StringLength(50, ErrorMessage = "Name must be no more than 50 characters.")]

            public string name { get; set; }

            [Required(ErrorMessage = "Address is required.")]

            [StringLength(100, ErrorMessage = "Address must be no more than 100 characters.")]

            public string address { get; set; }

            [Required(ErrorMessage = "Zipcode is required.")]

            [StringLength(10, ErrorMessage = "Zipcode must be no more than 10 characters.")]

            public string zip { get; set; }

            [Required(ErrorMessage = "Email is required.")]

            [EmailAddress(ErrorMessage = "Email is not a valid email address.")]

            [StringLength(100, ErrorMessage = "Email must be no more than 100 characters.")]

            public string email { get; set; }

            [Required(ErrorMessage = "Age is required.")]

            [Range(1, 125, ErrorMessage = "Age should be 1 to 125.")]

            public int age { get; set; }

            [Required(ErrorMessage = "Birthdate is required.")]

            public DateTime birthdate { get; set; }

            [Required(ErrorMessage = "Married or not is required.")]

            public bool married { get; set; }

            [Required(ErrorMessage = "Favorite color is required.")]

            public string color { get; set; }

    }

​

[Priyanka Karthikeyan]

Hi Tom,

We understand that you are looking for a way to refresh the edit form. To accomplish this, you can utilize the following code snippet:

public void refresh()

    {

editorModel = new EditorModel();

    }

By implementing this code in your application, you will be able to refresh the edit form and reset the model value upon clicking the specified button. This ensures that the form returns to its initial state.

Regards,

Priyanka K

Attachment: Reset_form_7382e7a8.zip