DxTagBox<TData, TValue>.ShowValidationIcon Property
Specifies whether a tag box shows validation icons.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v23.2.dll
NuGet Package: DevExpress.Blazor
Declaration
[Parameter]
public bool ShowValidationIcon { get; set; }
Property Value
Type | Description |
---|---|
Boolean |
|
Remarks
DxTagBox
supports data validation. You can add the editor to Blazor’s standard EditForm. This form validates user input based on data annotation attributes defined in a model. When a user enters invalid data into the editor, the editor is marked with a red outline. You can also use the ShowValidationIcon
property to specify whether the editor should display validation icons - error or success .
The code below uses the ValidateBy
property to validate email addresses (custom tags) specified in the TagBox. In this example the following validation settings are specified:
- the
ValidateBy
property is set to TagBoxValidateBy.Tags; - the Tags property’s bound field is marked with the Required and custom data annotation attributes that validate email formats.
After a user types an email address, the edit box is underlined in red or green: red indicates the editor contains an invalid tag(s) or is empty; green indicates the tags are valid.
<EditForm Model="@recipients" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit">
<DataAnnotationsValidator />
<p>
<label for="emails">Recipients:</label>
<DxTagBox Id="emails"
NullText="Select email recipients"
Data="@Emails.DataSource"
TData="string"
TValue="string"
AllowCustomTags="true"
ValidateBy="TagBoxValidateBy.Tags"
ShowValidationIcon="true"
@bind-Tags="@recipients.Data">
</DxTagBox>
<ValidationMessage For="@(() => recipients.Data)" />
</p>
<button type="submit">Submit</button>
</EditForm>
@code {
EmailRecipients recipients = new EmailRecipients();
private void HandleValidSubmit() {
Console.WriteLine("OnValidSubmit");
}
private void HandleInvalidSubmit() {
Console.WriteLine("OnInvalidSubmit");
}
}
For more information, refer to the following help topic: Validate Input.