AngularJS Validation from multiple components

Question

I'm developing a small AngularJS (1.6) app, trying to use a component-based architecture.

On my HomePageComponent, I have three different sub-component A, B and C, which all contains different content such as input fields, datepickers and a list. It should not be possible to navigate to the next page (state) if a validation in any of my sub-components fails. The "Button A" should therefore be disabled - ex. name input field in component A is not set.

However, I can't seem to find a reasonable solution/pattern on how to achieve this functionality while using components.

Does anyone have a proper solution for this? Thanks in advance

In the HomePageComponent if you add a <form> any inputs and validation in your nested components will participate in the outer form validation — Chris T
– Chris T, Commented Jun 28, 2017 at 4:58

Woot4Moo · Accepted Answer · 2017-06-27 15:34:51Z

1

You could consider using a wizard such as angular-wizard . From the github page:

<wizard on-finish="finishedWizard()" on-cancel="cancelledWizard()"> 
    <wz-step wz-title="Starting">
        <h1>This is the first step</h1>
        <p>Here you can use whatever you want. You can use other directives, binding, etc.</p>
        <input type="submit" wz-next value="Continue" />
    </wz-step>
    <wz-step wz-title="Continuing">
        <h1>Continuing</h1>
        <p>You have continued here!</p>
        <input type="submit" wz-next value="Go on" />
    </wz-step>
    <wz-step wz-title="More steps">
        <p>Even more steps!!</p>
        <input type="submit" wz-next value="Finish now" />
    </wz-step>
</wizard>

answered Jun 27, 2017 at 15:34

Woot4Moo

24.4k19 gold badges103 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mortenkp25 Over a year ago

Thanks - I'll look in to it.

Collectives™ on Stack Overflow

AngularJS Validation from multiple components

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related