Blazor EditForm: disable button causes all untouched fields to be marked as invalid

Question

I have a form that collects basic user information, including "Name" and "Description," both of which are required fields.

The submit button should be disabled when the form is not valid. However, I'm encountering an issue where all the fields are marked as invalid as soon as I enter the "Name" field, even if it is filled in correctly.

Is there a way to disable the button without triggering the validation messages on the input fields in the UI.

Like for example the Angular form.active property.

@page "/form"
@using System.ComponentModel.DataAnnotations
@using Microsoft.AspNetCore.Components.Forms

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

    <hr />
    <div class="form-group row">
        <label for="Name" class="col-sm-2 col-form-label">
            First Name
        </label>
        <div class="col-sm-10">
            <InputText id="Name" class="form-control" placeholder="First Name"
                       @bind-Value="_applicant.Name" />
            <ValidationMessage For="@(() => _applicant.Name)" />
        </div>
        <div class="col-sm-10">
            <InputText id="Des" class="form-control" placeholder="Description"
                       @bind-Value="_applicant.Description" />
            <ValidationMessage For="@(() => _applicant.Description)" />
        </div>
    </div>
    <button class="btn btn-primary" type="submit" disabled="@(!_context.Validate())">Send</button>
</EditForm>

@code {
    private EditContext _context;
    private Applicant _applicant = new Applicant();

    protected override void OnInitialized()
    {
        _context = new EditContext(_applicant);
    }

    private void HandleValidSubmit()
    {
    }

    public class Applicant
    {
        public int Id { get; set; }

        [Required]
        public string Name { get; set; } = string.Empty;

        [Required]
        public string Description { get; set; } = string.Empty;
    }
}

Answer 1

Following sample may meet your needs:
Notes:
Don't use _context.Validate(). Instead, you could check if ther is validation message via _context.GetValidationMessages().Count()==0. But [Required] is a special validation which doesn't add into count before submit (By contrast[StringLength(10)] will be count). So I check if all the fields are not empty manually here.

@using System.ComponentModel.DataAnnotations
@using Microsoft.AspNetCore.Components.Forms
@rendermode InteractiveServer

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

    <hr />
    <div class="form-group row">
        <label for="Name" class="col-sm-2 col-form-label">
            First Name
        </label>
        <div class="col-sm-10">
            <InputText id="Name" class="form-control" placeholder="First Name"
                       @bind-Value="_applicant.Name" />
            <ValidationMessage For="@(() => _applicant.Name)" />
        </div>
        <div class="col-sm-10">
            <InputText id="Des" class="form-control" placeholder="Description"
                       @bind-Value="_applicant.Description" />
            <ValidationMessage For="@(() => _applicant.Description)" />
        </div>
    </div>
    <button class="btn btn-primary" type="submit" disabled="@disableSubmit">Send</button>

</EditForm>

@code {
    private EditContext _context;
    private Applicant _applicant = new();

    private bool disableSubmit = true;

    protected override void OnInitialized()
    {
        _context = new EditContext(_applicant);
        _context.OnFieldChanged += HandleFieldChanged;
    }
    private void HandleFieldChanged(object sender, FieldChangedEventArgs e)
    {
        //after field changed (after binding), check if all fields are not empty
        if (typeof(Applicant).GetProperties().Any(prop => prop.GetValue(_applicant) == string.Empty))
        {
            disableSubmit = true;
        }
        else
        {
            disableSubmit = false;
        }
    }

    public void Dispose()
    {
        _context.OnFieldChanged -= HandleFieldChanged;
    }

    private void HandleValidSubmit()
    {

    }

    public class Applicant
    {
        public int Id { get; set; }

        [Required]
        public string Name { get; set; } = string.Empty;

        [Required]
        public string Description { get; set; } = string.Empty;
    }
}