angularjs - 如何检查ngform是否有效

Question

我正在使用 ng-repeat 动态创建控件，如下所示

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

请建议我如何动态检查内部形式的有效性。

谢谢，

Answer 1

根据我的经验，为内部表单生成动态名称效果不佳。但是，对于具有相同（静态）名称的多个内部形式，角度似乎非常好。

为了验证控制器中的单个内部表单，您可以将内部表单有效性作为参数从视图传递给控制器​​。

同样重要的是要知道，如果任何子表单无效，则父表单将无效。这可用于同时验证所有内部形式。

演示代码片段：

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>