Open Closed

Disable/Enable Button based on Validation - Blazor UI #1026


User avatar
0
Leonardo.Willrich created
  • ABP Framework version: v4.2.2
  • UI type:Blazor
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): yes / no
  • Exception message and stack trace:
  • Steps to reproduce the issue:

Hi,

Im a modal form, I want to disable/enable the "Save" button based on the field validations. If there is no invalid field, then the button save should be enabled, otherwise, it should be disabled.

In my other native Blazor applicaiton, I am using the context from <EditForm>. But, using Blazorise it seems that there is no property like that available.

That is what I excepct to do: <button class="btn btn-primary" type="submit" disabled="@(!context.Validate())">Send</button> source: https://stackoverflow.com/questions/63770011/disable-enable-button-in-blazor-depending-on-what-is-in-the-form

What is the best way to do that using ABP.IO Blazor template with Blazorise?


3 Answer(s)
  • User Avatar
    0
    mladen.macanovic created

    Use StatusChanged event on <Validations> component.

    Here I have modified the code from Blazorise demo for demonstration.

    <Modal @ref="modalRef">
        <ModalContent Centered="true">
            <ModalHeader>
                <ModalTitle>
                    <Icon Name="IconName.Edit" />
                    User edit
                </ModalTitle>
                <CloseButton />
            </ModalHeader>
            <ModalBody>
                <Validations @ref="modalValidations" Model="@modalUser" ValidateOnLoad="false" StatusChanged="@OnStatusChanged">
                    <Validation>
                        <Field Horizontal="true">
                            <FieldLabel ColumnSize="ColumnSize.IsFull.OnTablet.Is2.OnDesktop">Full Name</FieldLabel>
                            <FieldBody ColumnSize="ColumnSize.IsFull.OnTablet.Is10.OnDesktop">
                                <TextEdit Placeholder="First and last name" @bind-Text="@modalUser.Name">
                                    <Feedback>
                                        <ValidationError />
                                    </Feedback>
                                </TextEdit>
                            </FieldBody>
                        </Field>
                    </Validation>
                    <Validation>
                        <Field Horizontal="true">
                            <FieldLabel ColumnSize="ColumnSize.IsFull.OnTablet.Is2.OnDesktop">Email</FieldLabel>
                            <FieldBody ColumnSize="ColumnSize.IsFull.OnTablet.Is10.OnDesktop">
                                <TextEdit Placeholder="Enter email" @bind-Text="@modalUser.Email">
                                    <Feedback>
                                        <ValidationError />
                                    </Feedback>
                                </TextEdit>
                            </FieldBody>
                        </Field>
                    </Validation>
                </Validations>
            </ModalBody>
            <ModalFooter>
                <Button Color="Color.Secondary" Clicked="@CloseUserModal">Close</Button>
                <Button Color="Color.Primary" Clicked="@CloseUserModal" Disabled="@saveDisabled">Save Changes</Button>
            </ModalFooter>
        </ModalContent>
    </Modal>
    
    @code{
        Validations validations;
        Validations annotationsValidations;
    
        bool saveDisabled = true;
    
        Modal modalRef;
        Validations modalValidations;
        User modalUser = new User();
    
        Task OnStatusChanged( ValidationsStatusChangedEventArgs eventArgs )
        {
            saveDisabled = eventArgs.Status != ValidationStatus.Success;
    
            return Task.CompletedTask;
        }
        
        Task OpenUserModal()
        {
            saveDisabled = true;
    
            // re-initialite model will be act as a "first load" for validations inside of modal dialog
            modalUser = new User();
    
            modalValidations.ClearAll();
    
            modalRef.Show();
    
            return Task.CompletedTask;
        }
    
        Task CloseUserModal()
        {
            modalRef.Hide();
    
            return Task.CompletedTask;
        }
    }
    
  • User Avatar
    0
    Leonardo.Willrich created

    Thank you for your answer.

    That works fine when I am adding a new entity. When editing, it doesn't work, the Save button is disabled by default. I just have created a new OnStatusChanged method for editing adding the option None. See below the new method:

    protected Task OnStatusChangedEditing(ValidationsStatusChangedEventArgs eventArgs)
    {
        saveDisabled = eventArgs.Status != ValidationStatus.None && eventArgs.Status != ValidationStatus.Success;
        return Task.CompletedTask;
    }
    
  • User Avatar
    0
    mladen.macanovic created

    Yes, I gave you one example for create modal. But the same rule can be applied for edit also.

Made with ❤️ on ABP v9.1.0-preview. Updated on December 13, 2024, 06:09