Blazor EditForm start with Submit button disabled

Question

I use EditForm in my Blazor application for submitting information from a blank form as well as a form that has been initialized with data fetched from a database. When I initialize the form with data from database, I want to keep the Submit button disabled until some input takes place. If no input takes place, the button should remain disabled, because there is no new information to be saved.

So I need an input detector of some sort on which I can trigger the Submit button disabled flag. What is the correct way of achieving this? So I need something like this:

<EditForm Model="MyModel">
   <InputText type="text" @bind-value="x" @oninput="OnInput"/>
</EditForm>

private void Oninput(){
 IsDisabled = false;
}

What's the correct way of achieving this that works with all sorts of inputs (text input, radio, check boxes etc.)

user3656651 · Accepted Answer · 2021-03-15 06:44:43Z

So after going through various options, the solution seems to be the following. I want to start with submit/save button disabled, and turn it on only when there is an input. One way of achieving this is using the EditContext OnFieldChanged event. Like this:

protected async override Task OnInitializedAsync()
{
        editContext = new EditContext(allRisksItem);
        editContext.OnFieldChanged += EditContext_OnFieldChanged;
        ....
}

private void EditContext_OnFieldChanged(object sender, FieldChangedEventArgs e)
{
        disable_button = false;

}

The OnFieldChanged event is fired when the EditCotext detects a field change in the form. I think I have come across event firing on input as well, but haven't tried that as yet. So with this solution no need to have an @oninput in every field for detecting input etc.

Hope this helps people who are searching for a solution to this issue. Thanks to those who gave other suggestions as well.

David Masterson · Accepted Answer · 2021-03-01 12:13:13Z

2

you can use the is modified flag on the form

<EditForm Model="_model" Context="_Context">
    <InputRadioGroup @bind-Value="@_model.SelectedManufacturer">Manufacturer:<br>
        @foreach (var manufacturer in Manufacturers)
        {
            <InputRadio Value="manufacturer" />@manufacturer<br>
        }
    </InputRadioGroup> 

     <button type="submit" disabled="@(!_Context.IsModified())">Submit</button>
</EditForm>

@code {

EditContext _Context { get; set; }


*//code below just to make the form work*
List<String> Manufacturers = new List<string> { "Ford", "Toyota", "Tesla" };
FormClass _model = new FormClass();

class FormClass
{
    public String SelectedManufacturer { get; set; }
}

}

edited Mar 1, 2021 at 12:13

answered Mar 1, 2021 at 8:31

David Masterson

1,0159 silver badges8 bronze badges

2 Comments

user3656651 Over a year ago

So you are suggesting that instead of keeping the Submit button disabled from the start, I leave the button operational and when Submit is clicked, I check if form has been modified and then proceed accordingly?

David Masterson Over a year ago

I have modified the code to toggle the disabled flag on the button using the editform context directly.

Bennyboy1973 · Accepted Answer · 2021-03-03 03:02:59Z

(Pre-note: You don't really need to wrap everything in EditForm controls, or use the Blazor versions of controls, unless you intend to use all the validation features, using Annotated Data on display models and so on) You can also use vanilla html controls.

I do this three ways (no promises that it's the Blazor best practice)

(1) put the control inside an if block.

if (!IsDisabled)
{
// My input stuff here
}

"Where's that button? Guess I better make a selection first!"

(2) Even though it complains about bad markup, you can set Disabled to boolean values

<someinput disabled="@IsDisabled">

The compiler may insist that disabled doesn't take boolean values, but apparently Blazor has your back, because it renders fine.

(3) Don't disable the control, but use it as a chance to provide info to the user. Have a red-colored label and set its text to "Cannot submit form until (something)."

One thing I usually do when I want to use text on the fly is to add a keyup event handler to catch the Enter key. There's not much point in enabling a control when someone has just typed the first letter of their name. (Although to be honest, Blazor is so responsive that I usually skip the button altogether and just go ahead and start processing the text):

<InputText type="text" @bind-value="x" @oninput="OnInput" @onkeyup="CheckText"/>

    void CheckText(KeyboardEventArgs e) 
    {
        if (e.Code == "Enter")
        {
            // IsDisabled = false;
            // StateHasChanged();
            DoMyTextStuff (x); 
        }
    }

Collectives™ on Stack Overflow

Blazor EditForm start with Submit button disabled

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related