Unexpected Validation In Tabs

[RealityMasque]

I have items in tab panels. I would like to be able to validate each individual item in a tab pane, as well as be able to validate all the items across the tabs.

In my case, some of the blazorise fields are defined in the tab panel, & some are defined in components in the same tab panel.

I have a validate button outside the tabs which invokes validations components ValidateAll() - these validations components have the same @ref. all the blazorise fields defined in the tab panel end up being validated. however, for the fields in the component in the tab panel, only the last tab's component's fields show validation has happened.

is there a way to accomplish what I am trying?

Here's the data class

    public class Item
    {
        public int Id { get; set; } = 0;
        public string? Name { get; set; } = "";
        public string? Description { get; set; } = "";

        public string IdString { get { return $"Item {Id}"; } }
    }

Here's the tab component:

<Card>
    <CardHeader>TabValidationTest</CardHeader>
    <CardBody>
        <Tabs SelectedTab="@SelectedItem.IdString" SelectedTabChanged="@OnSelectedTabChanged">
            <Items>
                @foreach (Item item in Items)
                {
                    <Tab Name="@item.IdString" Border="Border.Is1"><strong>@item.IdString</strong></Tab>
                }
            </Items>
            <Content>
                <Validations Mode="ValidationMode.Manual" @ref="@ItemsValidations">
                    @foreach (Item item in Items)
                    {
                        <TabPanel Name="@item.IdString">
                            <Card>
                                <CardBody>
                                    <Field Horizontal=true>
                                        <FieldLabel ColumnSize="ColumnSize.Is2">
                                            <strong>Item Name</strong>
                                        </FieldLabel>
                                        <FieldBody ColumnSize="ColumnSize.Is3">
                                            <Validation Validator="@ValidationRule.IsNotEmpty">
                                                <TextEdit @bind-Text="@SelectedItem.Name" />
                                                <ValidationError />
                                            </Validation>
                                        </FieldBody>
                                    </Field>
                                    <TabValidationFieldTest @ref="tabValidationFieldTest" SelectedItem="@SelectedItem" />
                                </CardBody>
                            </Card>
                        </TabPanel>
                    }
                </Validations>
            </Content>
        </Tabs>
    </CardBody>
    <CardFooter>
        <Button Color="Color.Secondary" Clicked="@ValidateItems">Validate Items</Button>
    </CardFooter>
</Card>

@code {
    public List<Item> Items = new List<Item>
    {
        new Item { Id = 1 },
        new Item { Id = 2 },
        new Item { Id = 3 },
    };

    private Validations? ItemsValidations = new();
    private Item SelectedItem { get; set; }
    private TabValidationFieldTest tabValidationFieldTest = new TabValidationFieldTest();

    protected override async Task OnInitializedAsync()
    {
        SelectedItem = Items.First();
    }

    private void OnSelectedTabChanged(string tabName)
    {
        SelectedItem = Items.First(x => x.IdString == tabName);
    }

    private async Task<bool> ValidateItems()
    {
        bool areItemsValid = await ItemsValidations.ValidateAll();
        bool areFieldsValid = await tabValidationFieldTest.ValidateItem();
        return (areItemsValid && areFieldsValid);
    }
}

Here's the component in each tab content:

<Validations @ref="ItemValidations" Mode="@ValidationMode.Manual">
    <Field Horizontal=true>
        <FieldLabel ColumnSize="ColumnSize.Is2">
            <strong>Item Description</strong>
        </FieldLabel>
        <FieldBody ColumnSize="ColumnSize.Is3">
            <Validation Validator="@ValidationRule.IsNotEmpty">
                <TextEdit @bind-Text="@SelectedItem.Description" />
                <ValidationError />
            </Validation>
        </FieldBody>
    </Field>
</Validations>
<Button Color="Color.Secondary" Clicked="@ValidateItem">Validate Description</Button>

@code {
    [Parameter]
    public Item SelectedItem { get; set; }

    private Validations? ItemValidations = new();

    public async Task<bool> ValidateItem()
    {
        return await ItemValidations.ValidateAll();
    }
}

[stsrki]

To clarify. Do You want to validate each tab separately? If yes, then you can wrap each TabPanel with its own Validations. And hold the reference of Validations in dictionary where the key would be the name of a tab.

PS. it is also good to use the key for loops.

@foreach (Item item in Items)
  {
      <TabPanel @key="@item" Name="@item.IdString">

[RealityMasque]

validationsRefs[item.Name] implies the value (which I'm assuming is of type Validations) has already been assigned. That's the part I'm missing - where does the Validations instance in the value for validationsRefs[item.Name] come from?

[stsrki]

Yes, you should already fill the dictionary with keys and empty values. The Blazor will fill the actual value for you once it is being used.

[RealityMasque]

ah, more of the hidden magic. :)

I also can't seem to find anything in the Blazorise documentation or github source anything about the @key attrubute/property. Can you refer me to somewhere I can read up on it?

[stsrki]

That's also one of the "hidden" Blazor features ;)

• https://blazor-university.com/components/render-trees/optimising-using-key/
• https://learn.microsoft.com/en-us/aspnet/core/blazor/components/element-component-model-relationships?view=aspnetcore-8.0

[RealityMasque]

omg, that worked in my test project! thank you! now to see if I can get it to work in the real one... :)