2014-03-25 100 views
4

我很难让验证工作使用ng-repeat语句。我有以下代码。当name字段为空时,我只想将has-error添加到div.form-group中。我似乎无法得到它的工作。有什么想法吗?ng重复中的角度验证不起作用

My Attempt in fiddler

<div ng-app="app" ng-controller="bookController"> 
    <form name="myForm" ng-submit="submitMe(this)" novalidate> 
     <table class="table"> 
      <tr ng-repeat="order in orders"> 
       <ng-form name="innerForm"> 
       <td>{{ order.id }}</td> 
       <td> 
        <div class="form-group" ng-class="{ 'has-error' : innerForm.name.$invalid && submitted }"> 
         <input type="input" ng-model="order.name" name="name" required /> 
        </div> 
       </td> 
       </ng-form> 
      </tr> 
     </table> 
     <input type="submit" value="submit" ng-click="submitted = true" /> 
    </form> 

    <pre> 
     {{ orders | json }} 
    </pre> 

</div> 


var app = angular.module("app", []); 

app.controller("bookController", function ($scope) { 

    $scope.submitMe = function(form) { 
     console.log(form); 
    }; 

    $scope.orders = [{ 
     id: 1, 
     name: '' 
    }, { 
     id: 2, 
     name: 'hat' 
    }]; 

}); 
+0

是否有嵌套NG-形式的原因? –

+1

因为您无法动态生成表单输入元素的“名称”属性,他需要验证http://docs.angularjs.org/api/ng/directive/form。另见http://stackoverflow.com/questions/12044277/how-to-validate-inputs-dynamically-created-using-ng-repeat-ng-show-angular – jbll

回答

8

移动的ngForm指令元素包含ngRepeat指令:

<tr ng-repeat="order in orders" ng-form="innerForm"> 

演示:http://jsfiddle.net/YTR95/

+0

在角1.3.15,我不能得到这个工作。 ng-form在使用这种方式时不会选取父窗体。我之前在表格中使用过它,但这不起作用。 –