Ghazanfar Ghazanfar - 4 months ago 44
AngularJS Question

Access form inside ng-include within ng-repeat

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

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