Access form inside ng-include within ng-repeat

Question

I want to create a wizard in my app . I displayed nav steps and by onclicking steps, I am changing contents of ng-include. ng-Include consist of a form name stepForm which I want to access from outside. Inside form I have some fields which are dynamically generating from and I just want to check if the form is $valid on each step.

When I return form from inside ng-include to a function it is working fine but in some cases I want to test from outside, Suppose I have button here to test the validity of form , how do I achieve that . Need help?

    <div ng-controller="StepController">
<div class="row">
        <button type="button" class="btn btn-danger" ng-click="endCall()"><i class="fa fa-phone fa-fw"></i>End Call</button>
    </div>
        <div class="stepwizard">
            <div class="stepwizard-row">
                <div class="stepwizard-step" ng-repeat="step in view.steps">
                    <a href="javascript:void(0)" ng-click="goToStep($index)" type="button" class="btn btn-default btn-circle">{{step}}</a>
                    <p>Step {{step}}</p>
                </div>
            </div>
        </div>

        <div ng-repeat="step in view.steps">
            <div ng-if="$index==getCurrentStep()">
                <div ng-include="view.template">
                   <form name="stepForm" novalidate>
                    some form fields which I am validation and just want to check form is valid or not
                   </form>
                </div>
            </div>
        </div>
    </div>




     $scope.view = {
          steps: ['Step 1', 'Step 2'],
          currentStepNumber: 0,
       }
         $scope.getCurrentStep = function () {
            return $scope.view.currentStepNumber;
        };
        $scope.goToStep = function (index) {
            if (typeof $scope.view.steps[index] != "undefined") {
                $scope.view.currentStepNumber = index;
            }
        };
        $scope.endCall=function(){  form is valid or not ?? }

Answer 1

ng-include creates a child scope. My guess is your problem is that the form validation object is in that child scope

Suggest adding a form object in controller and using that form object as name of <form>

$scope.wiz_form ={};

In view

<form name="wiz_form.step_1" novalidate>

Issues like this disappear when you use controllerAs methodology