Appearance Of Validation On RadzenDatePicker

Radzen.Blazor Components
1

I have created a basic page that has a RadzenDatePicker and RadzenTextBox on it - each with a RadzenRequiredValidator

However, the RadzenDatePicker appears differently which a red box around the control showing when it is invalid which doesn't show on the RadzenTextBox

image
image766×250 5.74 KB

Code Extract

<RadzenTemplateForm TItem="DatePickerData" Data="@DatePickerDemo">
    <RadzenStack>
        <RadzenRow>
            <RadzenColumn Size="2">
                <RadzenLabel Text="Date" Component="DemoDate" />
            </RadzenColumn>
            <RadzenColumn Size="10">
                <RadzenDatePicker TValue="DateTime?" @bind-Value=@DatePickerDemo.Date Name="DemoDate" Style="width: 100%;" DateFormat="dd/MM/yyyy" Min="DateTime.Today.AddYears(-3)" Max="DateTime.Today" />
                <RadzenRequiredValidator Text="Date is required" Component="DemoDate" />
            </RadzenColumn>
        </RadzenRow>

        <RadzenRow>
            <RadzenColumn Size="2">
                <RadzenLabel Text="Note" Component="DemoNote" />
            </RadzenColumn>
            <RadzenColumn Size="10">
                <RadzenTextBox @bind-Value=@DatePickerDemo.Note Name="DemoNote" Style="width: 100%;" />
                <RadzenRequiredValidator Text="Note is required" Component="DemoNote" />
            </RadzenColumn>
        </RadzenRow>

        <RadzenRow>
            <RadzenColumn Size="2" Offset="0">
                <RadzenButton Text="Submit" ButtonStyle="ButtonStyle.Success" ButtonType="ButtonType.Submit" />
            </RadzenColumn>
        </RadzenRow>
    </RadzenStack>
</RadzenTemplateForm>
2

Hi @RobertBlackmore,

Thank you for bringing this up! We've logged an issue: Unify invalid state of forms components · Issue #1799 · radzenhq/radzen-blazor · GitHub

Most probably we will add a property to <RadzenTemplateForm> that allows you to show/hide the invalid state style across all components within the form.

In the meantime, the following style should remove the outline (for the sake of consistency):

.invalid {
    outline: none !important;
}