ng-repeat 中的 ng-include 中的访问表单

Question

我想在我的应用程序中创建一个向导。我显示了导航步骤，通过单击步骤，我正在更改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 ?? }

Answer 1

ng-include 创建一个子作用域。我的猜测是您的问题是表单验证对象在该子范围内

建议在控制器中添加一个表单对象并将该表单对象用作name of <form>

$scope.wiz_form ={};

在视图中

<form name="wiz_form.step_1" novalidate>

当您使用 controllerAs 方法时，此类问题会消失