Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

I have a form splitted in 4 steps (I made a form "wizard" using ng-switch), the submit button is on the last page of the wizard. I have some troubles making the angular form validation to work . It seems that the formName.$invalid only watches the inputs of the current step of the form.

    <form name="carouselForm">
        <div ng-switch="modal.getCurrentStep()" class="slide-frame">
            <div ng-switch-when="general" class="wave row">

                ....

            </div>
            <div ng-switch-when="carousel" class="wave row">
                <div class="col-md-12">
                    <div class="form-group"
                        ng-class="">
                        <label for="Title">
                            Title <span class="red">*</span>
                        </label>
                        <div>
                            <input id="Title"
                            ng-model="entityData.Title"
                            type="text"
                            required
                            placeholder="" class="form-control input-md">
                        </div>
                    </div>
                </div>
            </div>
            <div ng-switch-when="details" class="wave row">

                .....

            </div>
            <div ng-switch-when="description" class="wave row">

                .....

            </div>
        </div>
    </form>

I removed most of the form cause it would have been very long. In step two I left an input with the required tag. On this step the carouselForm.$invalid is properly set to true if this field is not set, but as soon as I change to the next step, carouselForm.$invalid is false again even if I didn't filled the required input.

It seems that the angular form validation doesn't watch the inputs in my other ng-switch block. Is there a way to make include them into the validation ?

Thank you very much !

share|improve this question
    
elements will only exist for one condition of the switch at a time. Can only validate what exists – charlietfl Jul 9 '15 at 19:29
    
Would it be better to use ng-show / ng-hide to handle the wizard behavior instead of ng-switch ? – nmod68 Jul 9 '15 at 19:32
    
@nmod68 From a quick search, it seems that would be the only way to achieve your desired behavior. – Devin H. Jul 9 '15 at 20:44

You can replace ng-switch-when by ng-show, that way it doesn't get removed from the DOM, but is hidden using CSS.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.