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

Question

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

当我 return 从内部 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 方法时，此类问题就会消失

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

Access form inside ng-include within ng-repeat

angularjs

forms

angularjs-ng-include