[Blazor] Trigger validation outside of EditForm

daniel-p-tech commented 3 years ago

Hi,

Is it possible to somehow manually trigger validation from a different component than the component hosting EditForm? Please refer to the following snippet.

I'm trying to implement a simple wizard that consists of several tabs. Each tab has its own EditForm. When user clicks the Next button which is in the Navigation component (footer of a B5 card), I need to validate an active tab's EditForm before moving to the next step. Acquiring reference to EditForm object does not provide any public methods that I could call. I don't want to have a copy of Next button in each tab for various reasons (this is going to be part of a much more complex UI where such solution is not an option).

Thank you.

<BlzCard
    HeaderCssClass="bg-secondary text-white"
    BodyCssClass="p-0">
    <Header>
        Wizard
    </Header>
    <Body>
        <BlzTab
            ActiveTabIndex="0"
            CssClass="p-1">
            <BlzTabItem Text="Step 1" CssClass="p-2">
                <Step1 />
            </BlzTabItem>
            <BlzTabItem Text="Step 2">
                <Step2 />
            </BlzTabItem>
            <BlzTabItem Text="Step 3">
                <Step3 />
            </BlzTabItem>
            <BlzTabItem Text="Step 4">
                <Step4 />
            </BlzTabItem>
        </BlzTab>
    </Body>
    <Footer>
        <Navigation />
    </Footer>
</BlzCard>

javiercn commented 3 years ago

@daniel-p-tech thanks for contacting us.

You can grab a reference to the component with @ref=_form and then do _form.EditContext.Validate()

ghost commented 3 years ago

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.

dotnet / aspnetcore

[Blazor] Trigger validation outside of EditForm #31824