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

3 Answer(s)

• 

  0

  mladen.macanovic created 3 years ago

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

  Save Cancel
• 

  0

  Leonardo.Willrich created 3 years ago

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

  Save Cancel
• 

  0

  mladen.macanovic created 3 years ago

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

  Save Cancel