search

abpframework / abp

Open-source web application framework for ASP.NET Core! Offers an opinionated architecture to build enterprise software solutions with best practices on top of the .NET. Provides the fundamental infrastructure, cross-cutting-concern implementations, startup templates, application modules, UI themes, tooling and documentation.
https://abp.io
GNU Lesser General Public License v3.0
12.88k stars 3.44k forks source link

Exception thrown on pages using Blazorise Validation Tags - 4.3.rc1 upgrade #8418

Closed 274188A closed 3 years ago

274188A commented 3 years ago

I am using Balzorise Validation

Any page where i use validation tags is now throwing the following Blazorise error:

global.js?_v=637508855080927991:790 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Value cannot be null. System.ArgumentNullException: Value cannot be null. at Blazorise.Validation.DetermineHandlerType() at Blazorise.Validation.Validate(Object newValidationValue) at Blazorise.Validation.InitializeInput(IValidationInput inputComponent) at Blazorise.BaseInputComponent`1[[System.String, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].InitializeValidation() at Blazorise.TextEdit.SetParametersAsync(ParameterView parameters)

Example 

<Modal @ref="CreateModal">

    @* Large Modal use 12 total size for fields size *@
    <ModalContent IsCentered="true" Size="ModalSize.ExtraLarge">
        <ModalHeader>
            <ModalTitle>New Doctor</ModalTitle>
            <CloseButton Clicked="CloseCreateModalAsync" />
        </ModalHeader>

        <ModalBody>
            <Validations Mode="ValidationMode.Auto" ValidateOnLoad="false">

                <Fields>

                    <Validation>
                        <Field ColumnSize="ColumnSize.Is1.OnDesktop">
                            <FieldLabel>@L["Title"]</FieldLabel>
                            <FieldBody>
                                <TextEdit @bind-Text="@NewEntity.Title">
                                    <Feedback>
                                        <ValidationError/>
                                        <ValidationSuccess/>
                                    </Feedback>
                                </TextEdit>
                            </FieldBody>
                        </Field>
                    </Validation>

                    <Validation>
                        <Field ColumnSize="ColumnSize.Is3.OnDesktop">
                            <FieldLabel>@L["FirstName"]</FieldLabel>
                            <FieldBody>
                                <TextEdit @bind-Text="@NewEntity.FirstName">
                                    <Feedback>
                                        <ValidationError/>
                                        <ValidationSuccess/>
                                    </Feedback>
                                </TextEdit>
                            </FieldBody>
                        </Field>
                    </Validation>

                    <Validation>
                        <Field ColumnSize="ColumnSize.Is4.OnDesktop">
                            <FieldLabel>@L["LastName"]</FieldLabel>
                            <FieldBody>
                                <TextEdit @bind-Text="@NewEntity.LastName" >
                                    <Feedback>
                                        <ValidationError />
                                        <ValidationSuccess />
                                    </Feedback>
                                </TextEdit>
                            </FieldBody>
                        </Field>
                    </Validation>

                    <Validation>
                        <Field ColumnSize="ColumnSize.Is3.OnDesktop">

                            <FieldLabel>@L["Gender"]</FieldLabel>
                            <FieldBody>
                                <Select TValue="Guid?" @bind-SelectedValue="@NewEntity.GenderId">
                                    <SelectItem TValue="Guid" Value="Guid.Empty"/>
                                    @foreach (var gender in CreatingGenderListData)
                                    {
                                        <SelectItem TValue="Guid" Value="@gender.Id">
                                            @gender.Name
                                        </SelectItem>
                                    }

                                </Select>
                            </FieldBody>
                        </Field>
                    </Validation>

                </Fields>

                <Fields>
                    <Validation>
                        <Field ColumnSize="ColumnSize.Is4.OnDesktop">
                            <FieldLabel>@L["CourtesyName"]</FieldLabel>
                            <FieldBody>
                                <TextEdit @bind-Text="@NewEntity.CourtesyName" Placeholder="optional">
                                    <Feedback>
                                        <ValidationError />
                                        <ValidationSuccess />
                                    </Feedback>
                                </TextEdit>
                            </FieldBody>
                        </Field>
                    </Validation>

                    <Validation Validator="@ValidationRule.IsEmail">
                        <Field ColumnSize="ColumnSize.Is4.OnDesktop">
                            <FieldLabel>@L["Email"]</FieldLabel>
                            <FieldBody>
                                <TextEdit @bind-Text="@NewEntity.Email" Placeholder="email address">
                                    <Feedback>
                                        <ValidationError />
                                        <ValidationSuccess />
                                    </Feedback>
                                </TextEdit>
                            </FieldBody>
                        </Field>

                    </Validation>

                    <Validation>
                        <Field ColumnSize="ColumnSize.Is4.OnDesktop">
                            <FieldLabel>@L["Phone"]</FieldLabel>
                            <FieldBody>
                                <TextEdit @bind-Text="@NewEntity.Phone">
                                    <Feedback>
                                        <ValidationError />
                                        <ValidationSuccess />
                                    </Feedback>
                                </TextEdit>
                            </FieldBody>
                        </Field>
                    </Validation>

                </Fields>

                <Fields>

                    <Field ColumnSize="ColumnSize.Is4.OnDesktop">
                        <FieldLabel>@L["Insurance"]</FieldLabel>
                        <Select TValue="Guid?" @bind-SelectedValue="@NewEntity.DoctorInsuranceId">
                            <SelectItem TValue="Guid" Value="Guid.Empty"/>
                            @foreach (var typeValue in CreatingInsuranceListData)
                            {
                                <SelectItem Value="@typeValue.Id">
                                    @typeValue.Name
                                </SelectItem>
                            }
                        </Select>
                    </Field>

                    <Validation Validator="@((e) => ValidationRule.IsLength((string) e.Value, 6, 6))">
                        <Field ColumnSize="ColumnSize.Is2.OnDesktop">
                            <FieldLabel>@L["RACGP"]</FieldLabel>
                            <FieldBody>
                                <TextEdit @bind-Text="@NewEntity.RACGP" MaxLength="6" Placeholder="6 digits">
                                    <Feedback>
                                        <ValidationError />
                                        <ValidationSuccess />
                                    </Feedback>
                                </TextEdit>
                            </FieldBody>
                        </Field>
                    </Validation>

                    <Validation Validator="@((e) => ValidationRule.IsLength((string) e.Value, 7, 7))">
                        <Field ColumnSize="ColumnSize.Is2.OnDesktop">
                            <FieldLabel>@L["RegistrationNumber"]</FieldLabel>
                            <FieldBody>
                                <TextEdit @bind-Text="@NewEntity.RegistrationNumber" MaxLength="7" Placeholder="7 digits">
                                    <Feedback>
                                        <ValidationError />
                                        <ValidationSuccess />
                                    </Feedback>
                                </TextEdit>
                            </FieldBody>
                        </Field>
                    </Validation>

                </Fields>

            </Validations>
        </ModalBody>

        <ModalFooter>
            <Button Color="Color.Secondary"
                    Clicked="CloseCreateModalAsync">
                Cancel
            </Button>
            <Button Color="Color.Primary"
                    Clicked="CreateEntityAsync">
                Save
            </Button>
        </ModalFooter>
    </ModalContent>
</Modal>

<Modal @ref="EditModal">

    <ModalContent IsCentered="true" Size="ModalSize.ExtraLarge">
        <ModalHeader>
            <ModalTitle>@EditingEntity.FullName</ModalTitle>
            <CloseButton Clicked="CloseEditModalAsync" />
        </ModalHeader>
        <ModalBody>

            <Validations Mode="ValidationMode.Auto" ValidateOnLoad="true">

                <Fields>

                    <Validation>
                        <Field ColumnSize="ColumnSize.Is1.OnDesktop">
                            <FieldLabel>@L["Title"]</FieldLabel>
                            <FieldBody>
                                <TextEdit @bind-Text="@EditingEntity.Title">
                                    <Feedback>
                                        <ValidationError/>
                                        <ValidationSuccess/>
                                    </Feedback>
                                </TextEdit>
                            </FieldBody>
                        </Field>
                    </Validation>

                    <Validation>
                        <Field ColumnSize="ColumnSize.Is3.OnDesktop">
                            <FieldLabel>@L["FirstName"]</FieldLabel>
                            <FieldBody>
                                <TextEdit @bind-Text="@EditingEntity.FirstName">
                                    <Feedback>
                                        <ValidationError/>
                                        <ValidationSuccess/>
                                    </Feedback>
                                </TextEdit>
                            </FieldBody>
                        </Field>
                    </Validation>

                    <Validation>
                        <Field ColumnSize="ColumnSize.Is4.OnDesktop">
                            <FieldLabel>@L["LastName"]</FieldLabel>
                            <FieldBody>
                                <TextEdit @bind-Text="@EditingEntity.LastName">
                                    <Feedback>
                                        <ValidationError/>
                                        <ValidationSuccess/>
                                    </Feedback>
                                </TextEdit>
                            </FieldBody>
                        </Field>
                    </Validation>

                    <Validation>
                        <Field ColumnSize="ColumnSize.Is3.OnDesktop">

                            <FieldLabel>@L["Gender"]</FieldLabel>
                            <FieldBody>
                                <Select TValue="Guid?" @bind-SelectedValue="@EditingEntity.GenderId">
                                    <SelectItem TValue="Guid" Value="Guid.Empty"/>
                                    @foreach (var gender in EditingGenderListData)
                                    {
                                        <SelectItem TValue="Guid" Value="@gender.Id">
                                            @gender.Name
                                        </SelectItem>
                                    }

                                </Select>
                            </FieldBody>
                        </Field>
                    </Validation>

                </Fields>

                <Fields>
                    <Validation>
                        <Field ColumnSize="ColumnSize.Is4.OnDesktop">
                            <FieldLabel>@L["CourtesyName"]</FieldLabel>
                            <FieldBody>
                                <TextEdit @bind-Text="@EditingEntity.CourtesyName" Placeholder="optional">
                                    <Feedback>
                                        <ValidationError/>
                                        <ValidationSuccess/>
                                    </Feedback>
                                </TextEdit>
                            </FieldBody>
                        </Field>
                    </Validation>

                    <Validation Validator="@ValidationRule.IsEmail">
                        <Field ColumnSize="ColumnSize.Is4.OnDesktop">
                            <FieldLabel>@L["Email"]</FieldLabel>
                            <FieldBody>
                                <TextEdit @bind-Text="@EditingEntity.Email" Placeholder="email address">
                                    <Feedback>
                                        <ValidationError/>
                                        <ValidationSuccess/>
                                    </Feedback>
                                </TextEdit>
                            </FieldBody>
                        </Field>

                    </Validation>

                    <Validation>
                        <Field ColumnSize="ColumnSize.Is4.OnDesktop">
                            <FieldLabel>@L["Phone"]</FieldLabel>
                            <FieldBody>
                                <TextEdit @bind-Text="@EditingEntity.Phone">
                                    <Feedback>
                                        <ValidationError/>
                                        <ValidationSuccess/>
                                    </Feedback>
                                </TextEdit>
                            </FieldBody>
                        </Field>
                    </Validation>

                </Fields>

                <Fields>

                    <Field ColumnSize="ColumnSize.Is4.OnDesktop">
                        <FieldLabel>@L["Insurance"]</FieldLabel>
                        <Select TValue="Guid?" @bind-SelectedValue="@EditingEntity.DoctorInsuranceId">
                            <SelectItem TValue="Guid" Value="Guid.Empty"/>
                            @foreach (var typeValue in EditingInsuranceListData)
                            {
                                <SelectItem Value="@typeValue.Id">
                                    @typeValue.Name
                                </SelectItem>
                            }
                        </Select>
                    </Field>

                    <Validation Validator="@((e) => ValidationRule.IsLength((string) e.Value, 6, 6))">
                        <Field ColumnSize="ColumnSize.Is2.OnDesktop">
                            <FieldLabel>@L["RACGP"]</FieldLabel>
                            <FieldBody>
                                <TextEdit @bind-Text="@EditingEntity.RACGP" MaxLength="6" Placeholder="6 digits">
                                    <Feedback>
                                        <ValidationError/>
                                        <ValidationSuccess/>
                                    </Feedback>
                                </TextEdit>
                            </FieldBody>
                        </Field>
                    </Validation>

                    <Validation Validator="@((e) => ValidationRule.IsLength((string) e.Value, 7, 7))">
                        <Field ColumnSize="ColumnSize.Is2.OnDesktop">
                            <FieldLabel>@L["RegistrationNumber"]</FieldLabel>
                            <FieldBody>
                                <TextEdit @bind-Text="@EditingEntity.RegistrationNumber" MaxLength="7" Placeholder="7 digits">
                                    <Feedback>
                                        <ValidationError/>
                                        <ValidationSuccess/>
                                    </Feedback>
                                </TextEdit>
                            </FieldBody>
                        </Field>
                    </Validation>

                </Fields>

            </Validations>

            <Accordion>
                @*PRACTICES*@
                <Collapse Visible="@editPracticesCollapseVisible">
                    <CollapseHeader>
                        <Heading Size="HeadingSize.Is5">
                            <Button Clicked="ToggleEngagementsExpandAsync">@L["Practices"]</Button>
                        </Heading>
                    </CollapseHeader>
                    <CollapseBody>
                        <DoctorPractices @ref="doctoPracticesComponent" DoctorId="@EditingEntityId"></DoctorPractices>
                    </CollapseBody>
                </Collapse>
            </Accordion>
            <AuditFieldsComponent  @ref="auditFieldsComponent"></AuditFieldsComponent>
        </ModalBody>

        <ModalFooter>
            <Button Color="Color.Secondary"
                    Clicked="CloseEditModalAsync">
                Cancel
            </Button>
            <Button Color="Color.Primary"
                    Clicked="UpdateEntityAsync">
                Save
            </Button>
        </ModalFooter>
    </ModalContent>
</Modal>

@code{

}

Blazor project xml

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

    <PropertyGroup>
        <TargetFramework>net5.0</TargetFramework>
        <BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>
        <BlazorWebAssemblyEnableLinking>false</BlazorWebAssemblyEnableLinking>
        <PublishTrimmed>false</PublishTrimmed>
    </PropertyGroup>

    <ItemGroup>
        <PackageReference Include="BlazorGoogleMaps" Version="1.0.13" />
        <PackageReference Include="Blazorise.Bootstrap" Version="0.9.3.3" />
        <PackageReference Include="Blazorise.Icons.FontAwesome" Version="0.9.3.3" />
        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.*" />
        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.*" />
    </ItemGroup>

    <ItemGroup>
        <PackageReference Include="Volo.Abp.Autofac.WebAssembly" Version="4.3.0-rc.1" />
        <PackageReference Include="Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme" Version="4.3.0-rc.1" />
    </ItemGroup>

    <ItemGroup>
        <PackageReference Include="Volo.Abp.Identity.Blazor.WebAssembly" Version="4.3.0-rc.1" />
        <PackageReference Include="Volo.Abp.TenantManagement.Blazor.WebAssembly" Version="4.3.0-rc.1" />
        <PackageReference Include="Volo.Abp.SettingManagement.Blazor.WebAssembly" Version="4.3.0-rc.1" />
    </ItemGroup>

    <ItemGroup>
        <ProjectReference Include="..\..\src\Gp.HttpApi.Client\Gp.HttpApi.Client.csproj" />
    </ItemGroup>

</Project>
274188A commented 3 years ago

If the validation tags are removed the exceptions do not occur

ilkayilknur commented 3 years ago

I experienced the same problem. The issue was using the event approach(Value/TextChanged) instead of the binding approach(@bind-Value). However, I couldn't find a similar usage in your code.

@stsrki might have suggestions.

stsrki commented 3 years ago

I first thought the problem was missing @bind-Text, but you have it defined on all components. After more investigation, I think the problem is that you don't have or use any validator.

<Validations Mode="ValidationMode.Auto" ValidateOnLoad="false"> is empty. In case you want to use data-annotation than you must define Model parameter.

All your <Validation> also don't have any validator. In case you don't use data-annotation than you must define validator, eg. <Validation Validator="@ValidationRule.IsNotEmpty">.