Validation on a Select component - Blazor UI #1025

5 Answer(s)

• 

  0

  mladen.macanovic created 3 years ago

  You need to wrap Select with validations and use Feedback element.

  <Validation>
      <Select TValue="int" @bind-SelectedValue="@NewEntity.NetworkTypeId">
          <SelectItem TValue="int" Value="0">@L["SupplyNetwork:SelectNetworkType"]</SelectItem>
          @foreach ( var network in networkTypeList )
          {
              <SelectItem TValue="int" Value="@network.Id">
                  @network.Name
              </SelectItem>
          }
          <Feedback>
              <ValidationError />
          </Feedback>
      </Select>
  </Validation>
  

  Also, don't forget to read Blazorise documentation for reference.

  Save Cancel
• 

  0

  Leonardo.Willrich created 3 years ago

  Hi,

  The code above doesn't work. I had to add the <ChildContent> markup for the <SelectItem> loop. See below:

  <Validation>
      <Field>
          <Row>
              <Column ColumnSize="ColumnSize.Is5">
                  <FieldLabel>@L["SupplyNetwork:NetworkType"]</FieldLabel>
              </Column>
              <Column ColumnSize="ColumnSize.Is7">
                  <Select TValue="int" @bind-SelectedValue="@EditingEntity.NetworkTypeId">
                      <ChildContent>
                          <SelectItem TValue="int" Value="0">@L["SupplyNetwork:SelectNetworkType"]</SelectItem>
                          @foreach (var network in networkTypeList)
                          {
                              <SelectItem TValue="int" Value="@network.Id">
                                  @network.Name
                              </SelectItem>
                          }
                      </ChildContent>
                      <Feedback>
                          <ValidationError />
                      </Feedback>
                  </Select>
              </Column>
          </Row>
      </Field>
  </Validation>
  

  Regarding the documatation, I am trying my best with that. I haven't seen nothing about Validation in ABP Framework or ABP Commercial documents and I've found something in Blasorise documentation, however, I haven't found any example for <SELECT>. Can you please refer where I would be found that?

  Save Cancel
• 

  0

  mladen.macanovic created 3 years ago

  You can disable a save button by listening for validations status changed

  <Validations Mode="ValidationMode.Auto" StatusChanged="@OnValidationsStatusChanged">
     <Validation>
          <Field>
              <Row>
                  <Column ColumnSize="ColumnSize.Is5">
                      <FieldLabel>@L["SupplyNetwork:NetworkType"]</FieldLabel>
                  </Column>
                  <Column ColumnSize="ColumnSize.Is7">
                      <Select TValue="int" @bind-SelectedValue="@EditingEntity.NetworkTypeId">
                          <ChildContent>
                              <SelectItem TValue="int" Value="0">@L["SupplyNetwork:SelectNetworkType"]</SelectItem>
                              @foreach ( var network in networkTypeList )
                              {
                                  <SelectItem TValue="int" Value="@network.Id">
                                      @network.Name
                                  </SelectItem>
                              }
                          </ChildContent>
                          <Feedback>
                              <ValidationError />
                          </Feedback>
                      </Select>
                  </Column>
              </Row>
          </Field>
      </Validation>
  </Validations>
  
  <Button Color="Color.Primary" Disabled="@saveDisabled">Save</Button>
  
  @code{
      Task OnValidationsStatusChanged( ValidationsStatusChangedEventArgs eventArgs )
      {
          saveDisabled = eventArgs.Status == ValidationStatus.Error;
  
          return Task.CompletedTask;
      }
  
      bool saveDisabled;
  }
  

  Save Cancel
• 

  0

  mladen.macanovic created 3 years ago

  Also I see you using Row and Column for horizontal form field. While that can work it is best to go with native approach. eg. with FieldLabel and FieldBody

  <Field Horizontal="true">
      <FieldLabel ColumnSize="ColumnSize.IsFull.OnTablet.Is2.OnDesktop">Full Name</FieldLabel>
      <FieldBody ColumnSize="ColumnSize.IsFull.OnTablet.Is10.OnDesktop">
          <TextEdit Autofocus="true" Placeholder="First and last name">
              <Feedback>
                  <ValidationError>Enter full name!</ValidationError>
              </Feedback>
          </TextEdit>
      </FieldBody>
  </Field>
  

  Save Cancel
• 

  0

  Leonardo.Willrich created 3 years ago

  That is great. Thank you for sharing that.

  Save Cancel