This is a preview of Radzen's new Material 3 premium theme, available only to Radzen Professional or Enterprise subscribers.
Browse components with a free theme by selecting one from the dropdown above.
RadzenCompareValidator compares the user input agains a predefined value or another component.
To use it perform these steps:
Name
. Data-bind its value to a model property via @bind-Value=@model.Property
.Component
property to the Name
of the input component. Set its Value
property to the value you want to compare with (usually another model property).Important! RadzenCompareValidator works only inside RadzenTemplateForm .
Here is a typical user registration form which checks if the user entered the same password.
To make the validator conditional you can set its Visible
property. When set to false
the validator will not run. In the example above Visible
is set to !string.IsNullOrEmpty(model.RepeatPassword)
- the validator will not run if RepeatPassword is empty.
<RadzenCompareValidator Visible=@(!string.IsNullOrEmpty(model.RepeatPassword)) Value=@model.Password Component="RepeatPassword" Text="Passwords should be the same" Popup=@popup Style="position: absolute" />
By default RadzenCompareValidator checks if the component value is equal to Value
. This can be changed via the Operator
property.
By default RadzenCompareValidator appears next to the component it validates. To make it appear below add Style="display:block"
.
<RadzenNumeric Name="Count" @bind-Value=@model.Count />
<RadzenCompareValidator Style="display:block" Component="Count" Text="Count should be less than 10" Operator="CompareOperator.LessThan" Value="10" />
To make it appear as a styled popup set its Popup
property to true
and set its CSS position
to absolute
. The validated component should have display: block
so the validation message appears right below it.
<RadzenNumeric Name="Count" @bind-Value=@model.Count Style="display:block" />
<RadzenCompareValidator Style="position:absolute" Popup="true" Component="Count" Text="Count should be less than 10" Operator="CompareOperator.LessThan" Value="10" />
Source Code licensed under
MIT
Radzen Blazor Studio is a desktop tool that empowers developers to create beautiful Blazor apps.
Develop your Blazor Server and WebAssembly applications visually with familiar WYSIWYG interface.