ng-repeat中的访问表格包含在ng-repeat

时间:2016-07-14 15:27:59

标签: angularjs forms angularjs-ng-include

我想在我的应用中创建一个向导。我显示了导航步骤,并通过点击步骤,我正在更改ng-include的内容。 ng-Include由我希望从外部访问的表单名称stepForm组成。在内部表单中,我有一些动态生成的字段,我只想检查每一步的表单是否为$valid

当我将表单从ng-include内部返回到函数时它工作正常但在某些情况下我想从外面测试,假设我在这里有一个按钮来测试表单的有效性,我该如何实现。需要帮助?

    <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 ?? }

1 个答案:

答案 0 :(得分:0)

ng-include创建子范围。我的猜测是你的问题是表单验证对象在那个子范围

建议在控制器中添加表单对象,并将该表单对象用作name的{​​{1}}

<form>

在视图中

$scope.wiz_form ={};

当您使用<form name="wiz_form.step_1" novalidate> 方法

时,此类问题就会消失