CODEWITHSUNDEEP
blazor
user3656651
user3656651

Reputation: 820

Blazor EditForm start with Submit button disabled

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.)

Upvotes: 2

Views: 2790

Answers (3)

user3656651
user3656651

Reputation: 820

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.

Upvotes: 3

Bennyboy1973
Bennyboy1973

Reputation: 4208

(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); 
        }
    }

Upvotes: 0

David Masterson
David Masterson

Reputation: 1005

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

}

Upvotes: 2

Related Questions