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

我必须为需要动态创建的多个表单进行表单验证。我通过使用ng-repeat 动态创建了表单，但我无法访问控制器中的表单。如何在angularjs中访问控制器中的多个表单？

请检查代码：

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

它工作正常，但我需要检查的MainForm的子窗体的至少一个是否有效或无效点击下一步按钮，所以我试图访问该在后控制器是这样的：

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

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

来源

2016-12-06 silvesterprabu

它不应该是' '？ – Baruch

你想用控制器中的这些形式做什么？ –

我想检查控制器中是否至少有任何一个mainform具有子表单中的所有有效数据 – silvesterprabu

我会使用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) 
    };

来源

2016-12-06 19:19:48 bhantol

雅我同意。但如何检查控制器？ – silvesterprabu

举一个例子，但如果您想知道如何以及在哪里查看特定表单，那么这将是最好的选择。 – bhantol

当我点击下一个按钮我需要检查主窗体是否有效 – silvesterprabu

你想用控制器中的窗体做什么？

看起来你不需要它。

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

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。

来源

2016-12-06 19:41:39

控制器文件该怎么做？ ....我已经尝试这样，但得到错误... – silvesterprabu

$ scope.navigate = function（）{console.log（$ scope.mainform。$ invalid）} – silvesterprabu

我添加了plunkr示例 –

日志显示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

来源

2016-12-07 14:09:28 georgeawg

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

回答

相关问题