AngularJS : form validation not working on hidden input

Question

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 !

Answer 1

您可以用ng-show替换ng-switch-when，这样它就不会从DOM中删除，而是被CSS隐藏了。