Question

我必须对必须动态创建的多个表单进行表单验证。我使用ng-repeat动态创建了表单但是我无法在控制器中访问该表单。

请检查代码：

 <button ng-click="navigate()">Next</button>
   <div ng-repeat="service in services">
     <ng-form name="mainform">
        <div ng-repeat="spec in service.products">
           <ng-form name="subform">
               <input type="text" name="{{spec.name}}" ng-model="spec.value">
               <span ng-show="subform[spec.name].$invalid">please enter</span>
           </ng-form>
        </div>
    </ng-form> 
  </div >

它运行正常，但是我需要检查主机的子窗体中是否有一个在点击下一个按钮后是否有效，所以我试图在控制器中访问它，如下所示：

 $scope.navigate=function(){
     console.log($scope.mainform.subform);
     console.log($scope.subform);
 }

但我得到两个控制台日志undefined。如何在控制器中访问多个动态创建的表单？

Answer 1

您想对控制器中的表单做什么？

看起来你不需要它。

您有表单层次结构。伪代码：

ng-form mainForm
  ng-form subFormOne
  ng-form subFormTwo

如果subFormOne或subFormTwo无效，则mainForm也将无效。如果所有子表单都有效，那么mainForm也将有效。您只需在代码中检查mainForm.$valid。

如果您需要以某种方式设置它，我建议您在那里使用CSS。 ngForm指令将类添加到元素中。您可以在css中使用.ng-form选择器为表单添加样式。例如：

.ng-form.ng-invalid {
  background-color: #ff0000;
}

这是plunkr example。

Answer 2

日志显示undefined，因为ng-repeat指令创建子范围，表单放在这些子范围上。

在ng-repeat：

上方的顶层创建表单

<button ng-click="navigate()">Next</button>

<!-- ADD top form above ng-repeat -->
<ng-form name=top>
    <div ng-repeat="service in services">
        <ng-form name="mainform_{{$index}}">
            <div ng-repeat="spec in service.products">
                 <ng-form name="subform_{{$index}}">
                     <input name="{{spec.name}}" ng-model="spec.value">
                 </ng-form>
            </div>
        </ng-form> 
    </div>
</ng-form>

然后ng-repeat内的表单将可见：

$scope.navigate=function(){
     console.log($scope.top);
     console.log($scope.top.mainform_0);
     console.log($scope.top.mainform_0.subform_0);
};

DEMO on PLNKR

Answer 3

我会使用ng-repeat中的$ index或者某些东西让它变得独一无二。

更新时间：12/6/2016根据评论。

plnkr of deeply nested dynamic forms and validation

<button ng-click="navigate()">Next</button>
<div class="outer" ng-repeat="service in services" ng-init="serviceSuffix=$index;serviceForm = 'form' +serviceSuffix">
  <h2>{{service.serviceName}} id= {{service.id}} {{serviceForm}}</h2>

  <ng-form name="{{serviceForm}}">
    <button ng-click="isValidForm(serviceSuffix)">Is Outer valid</button>
    <div class="inner" ng-repeat="spec in service.products" ng-init="specSuffix = serviceSuffix+'_'+$index; specForm = 'form' +specSuffix; ">
      <h2>{{spec.specName}} id={{spec.id}} {{specForm}}</h2>
      <ng-form name="{{specForm}}">
        <input required type="text" name="{{spec.specName}}" ng-model="spec.value">
        <span ng-show="this[specForm][spec.specName].$invalid">please enter</span>
        <button ng-click="isValidForm(specSuffix)">Is Inner valid</button>
      </ng-form>
    </div>
  </ng-form>
</div>

访问控制器中的第n个表单。

  $scope.isValidForm = function(suffix) {
    alert('form '+suffix+' valid='+$scope['form' +suffix].$invalid)
  };

如何在angularjs中访问控制器中的多个表单？

3 个答案: