2016-04-15 133 views
1

我使用NG-重复在我的控制器动态创建控件如下如何检查ngform是否有效

<div ng-form="mainform" ng-repeat="usr in users"> 
    <userdirective ng-form="innerform_idx_{{$index}}></userdirective> 
</div> 

我要检查,如果内部形式是有效还是无效。 我试过以下,但它不工作

for(i=0;i<users.length;i++) 
{ 
var innerformName="innerform_idx_"+i; 
    if($scope.mainform.innerformName.$valid) 
    { 
    // throwing undefined error. 
    } 
} 

请建议我怎么能动态检查内部形式的有效性。

谢谢,

+3

尝试'$ scope.mainform [innerformName] $ valid'。 – Ankh

回答

0

根据我的经验,生成一个内部形式的动态名称不起作用。然而,对于具有多个具有相同(静态)名称的内部窗体,角似乎是非常好的。

要验证单个控制器中的内部窗体,您可以将内部窗体有效性作为参数从视图传递到控制器。

知道如果任何子窗体无效,父窗体将无效也很重要。这可以用于同时验证所有内部表单。

代码片段演示:

var app = angular.module('myapp', []); 
 
app.controller('myctrl', function($scope) { 
 
    $scope.users = ['u1', 'u2', 'u3']; 
 
    $scope.validateForm = function(form) { 
 
    alert('form is valid: ' + form.$valid); 
 
    } 
 
});
.userform { 
 
    margin-bottom: 20px; 
 
} 
 
.invalid { 
 
    color: red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myapp" ng-controller="myctrl"> 
 
    <div ng-form="parentform"> 
 
    <div class="userform" ng-repeat="user in users" ng-form="innerform"> 
 
     <div>Username (maximum 5 characters): {{user}}</div> 
 
     <input ng-maxlength="5" ng-model="user" /> 
 
     <div ng-class="{'invalid': !innerform.$valid}">inner form is valid: {{innerform.$valid}}</div> 
 
     <button ng-click="validateForm(innerform)">Check my validy in the controller</button> 
 
    </div> 
 
    <div ng-class="{'invalid': !parentform.$valid}">Parent form is valid: {{parentform.$valid}}</div> 
 
    </div> 
 
</div>