Make RadzenColorPicker work with Native validation

Question

I have this form in Blazor:

<EditForm Model="testModel" OnSubmit="@(() => { var a = testModel.color; StateHasChanged(); })">
    <DataAnnotationsValidator />
    <ValidationSummary />
    
    @*<InputText @bind-Value="@testModel.Clolor" type="color"></InputText>*@
    <RadzenColorPicker @bind-Value="testModel.Color" ShowButton="true">

    </RadzenColorPicker>
    <h3>@testModel.color.ToString()</h3>
    <ValidationMessage For="@(() => testModel.color)"></ValidationMessage>    
    <br />
    <input type="submit" value="Submit" />
</EditForm>

with the model:

public class TestModel
    {
        [Required]
        [Range(typeof(int), "5000000", "10000000", ConvertValueInInvariantCulture = true, ErrorMessage = null, ErrorMessageResourceName = nameof(Resource.ClientResource.TypeYourUserName),
       ErrorMessageResourceType = typeof(Resource.ClientResource), ParseLimitsInInvariantCulture = true)]
        public string color { get; set; } = "0";
        public string Color
        {
            get { var rgb = System.Drawing.Color.FromArgb(int.Parse(color));
                return $"rgb({rgb.R}, {rgb.G}, {rgb.B})";
            }
            set {
                //color = value;
                var commaSep = value.Substring(4, value.Length - 5); var ints = commaSep.Split(',');
                int rgb = byte.Parse(ints[0].Trim());
                rgb = (rgb << 8) + byte.Parse(ints[1].Trim());
                rgb = (rgb << 8) + byte.Parse(ints[2].Trim());
                color = rgb.ToString();
            }
        }
}

When I use the Built in InputText type="color" with a simple string property with above data annotation, The validation shows normally. But when I want to use The Radzen Component with above codes, It is not working. (Note: for all other radzen components native validation works perfectly). How to make this work?

Make RadzenColorPicker work with Native validation

0 Answers0