Validation on a Select component - Blazor UI #1025 | Support

Leonardo.Willrich created 4 years ago

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,

I have a modal with some fields SELECT. The first item is just a generic item to message the user to select an option. Those fields are required, I don't want leave the user save the modal with some not selected field. How can I do that? I've tried play with Validation component, but it doesn't work.

Here one of my SELECT code:

<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>
    }
</Select>

mladen.macanovic created 4 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.

Leonardo.Willrich created 4 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?

mladen.macanovic created 4 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;
}

mladen.macanovic created 4 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>