Ticket T1279176
Visible to All Users

DevExpress components don't show validation styling when used in child components

created a day ago

In my client project I have Pages/ParentPage.razor and Components/ChildComponent.razor

When submitting, the <ValidationSummary /> shows both messages The DirectTextBox field is required. and The ChildTextBox field is required.

However, only the DirectTextBox field shows validation in the field itself:
Clipboard-File-1.png

How can I get the validation styling to show for controls that are used in child components?

ParentPage.razor has:

Razor
@page "/Parent" @using System.ComponentModel.DataAnnotations <h3>ParentPage</h3> <EditForm Model="this" OnValidSubmit="OnValidSubmit"> <DataAnnotationsValidator /> <ValidationSummary /> <label for="directTextBox">Direct <code>DxTextBox</code> on page</label> <DxTextBox InputId="directTextBox" @bind-Text=DirectTextBox/> <label for="childComponent"><code>DxTextBox</code> from child component</label> <ChildComponent InputId="childComponent" @bind-Value=ChildTextBox /> <DxButton Text="Submit" SubmitFormOnClick="true" /> </EditForm> @code { [Required] public string? DirectTextBox { get; set; } [Required] public string? ChildTextBox { get; set; } Task OnValidSubmit() { //do some work... return Task.CompletedTask; } }

ChildComponent.razor has:

Razor
<DxTextBox @bind-Text:get=Value @bind-Text:set=ValueChanged InputId=@InputId /> @code { [EditorRequired][Parameter] public string InputId { get; set; } = ""; [Parameter] public string? Value { get; set; } [Parameter] public EventCallback<string?> ValueChanged { get; set; } }

Answers approved by DevExpress Support

created 21 hours ago

Hello,

Thank you for reaching out to us.

Please refer to the following help topic where this use case is illustrated: Validate Input - Data Editors Inside Another Component. The main idea is to manually handle the TextChanged event and specify the Text and TextExpression properties.

Let us know if you need further assistance.

Best regards,
John

    Comments (2)

      Using the example from Validate Input - Data Editors Inside Another Component. I changed ChildComponent.razor to the following:

      Razor
      @using System.Linq.Expressions; <DxTextBox Text="@Value" TextChanged="@((v) => Value = v)" TextExpression="@ValueExpression" InputId=@InputId /> @code { [EditorRequired][Parameter] public string InputId { get; set; } = ""; private string? _value; [Parameter] public string? Value { get => _value; set { if (_value == value) return; _value = value; ValueChanged.InvokeAsync(value); } } [Parameter] public EventCallback<string?> ValueChanged { get; set; } [Parameter] public Expression<Func<string?>>? ValueExpression { get; set; } }

      The above does fix the issue, allowing validation to be shown correctly, however it triggers BL0007 Component parameter 'Components.ChildComponent.Value' should be auto property.


      The reasoning behind this warning is not as documented as I would like (there is a github issue on Microsoft's repo to improve it)
      The documentation I can find that I think is relevant to BL0007:


      I found the following works without triggering BL0007:

      Razor
      @using System.Linq.Expressions; <DxTextBox Text="@Value" TextChanged="@OnTextChanged" TextExpression="@ValueExpression" InputId=@InputId /> @code { [EditorRequired][Parameter] public string InputId { get; set; } = ""; [Parameter] public string? Value { get; set; } [Parameter] public EventCallback<string?> ValueChanged { get; set; } [Parameter] public Expression<Func<string?>>? ValueExpression { get; set; } private async Task OnTextChanged(string? newValue) => await ValueChanged.InvokeAsync(newValue); }

      Can the example at Validate Input - Data Editors Inside Another Component. be updated to avoid BL0007?

        Also, I'm not sure if this is more of a Microsoft Blazor thing or a DevExpress control thing, but I'm a bit surprised the following did not work:

        Razor
        @using System.Linq.Expressions; <DxTextBox @bind-Text:get=Value @bind-Text:set=ValueChanged InputId=@InputId /> @code { [EditorRequired][Parameter] public string InputId { get; set; } = ""; [Parameter] public string? Value { get; set; } [Parameter] public EventCallback<string?> ValueChanged { get; set; } [Parameter] public Expression<Func<string?>>? ValueExpression { get; set; } }

        The reason I am surprised the above does not work, is because @bind-get seems like it should auto set TextExpression.

        For example, if I attempt to use @bind-get and also set TextExpression, it gives the error RZ10010 The component parameter 'TextExpression' is used two or more times for this component. Parameters must be unique (case-insensitive). The component parameter 'TextExpression' is generated by the '@bind-Text:get' directive attribute. Components\ChildComponent.razor

        Razor
        @using System.Linq.Expressions; <DxTextBox @bind-Text:get=Value @bind-Text:set=ValueChanged TextExpression="@ValueExpression" InputId=@InputId /> @code { [EditorRequired][Parameter] public string InputId { get; set; } = ""; [Parameter] public string? Value { get; set; } [Parameter] public EventCallback<string?> ValueChanged { get; set; } [Parameter] public Expression<Func<string?>>? ValueExpression { get; set; } }

        If you can give any insight on why @bind- does not work with validation in child components, it would be appreciated, but I think the main follow up for this ticket is to update examples to avoid BL0007 as mentioned in my previous comment.

        Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

        Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.