使用索引位置的字段上的驗證

我有幾個我想動態複製的字段。我正在使用ng-reapt來完成這項工作。但是，驗證消息不起作用。這是我得到的：使用索引位置的字段上的驗證

<html ng-app="app"> 
    <head> 
     <title>teste</title> 
    </head> 
    <body ng-controller='testController'> 
     <label>Number of Workers</label> 
     <select ng-model="quantity" ng-change="changed()"> 
      <option value="1" selected="selected">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
     </select> 

     <form name='frm' action='/workers/add' method='POST'> 
      <div ng-repeat="i in numberOfWorkers track by $index">{{$index + 1}} 
       <div> 
        <label>First Name</label> 
        <input class="fullSize" letters-only placeholder="Please enter your name" type="text" name="firstName" ng-model="workers[$index].firstName" ng-minlength="3" ng-maxlength="50" ng-required="true" maxlength="50"> 
        <span ng-cloak class="error-container" ng-show="submitted || showErrors(frm.firstName)"> 
         <small class="error" ng-show="frm.firstName[{{$index}}].$error.required">* Please enter your name.</small> 
         <small class="error" ng-show="frm.firstName[{{$index}}].$error.minlength">* At least 3 chars.</small> 
         <small class="error" ng-show="frm.firstName[{{$index}}].$error.maxlength">* No more than 50 chars.</small> 
        </span> 
       </div> 
       <div> 
        <label>Surname</label> 
        <input class="fullSize" letters-only placeholder="Please enter your surname" type="text" name="surName" ng-model="workers[$index].surName" ng-minlength="3" ng-maxlength="50" ng-required="true" maxlength="50"> 
        <span ng-cloak class="error-container" ng-show="submitted || showErrors(frm.surName)"> 
         <small class="error" ng-show="frm.surName[$index].$error.required">* Please enter your name.</small> 
         <small class="error" ng-show="frm.surName[$index].$error.minlength">* At least 3 chars.</small> 
         <small class="error" ng-show="frm.surName[$index].$error.maxlength">* No more than 50 chars.</small> 
        </span>     
       </div> 
       <div> 
        <label>Email</label> 
        <input class="grid-full" placeholder="Please enter your e-mail" type="email" name="email" ng-model="workers[$index].email" ng-minlength="3" ng-maxlength="50" required maxlength="50"> 
        <span class="error-container" ng-show="submitted || showErrors(frm.email)"> 
         <small class="error" ng-show="frm.email[$index].$error.required">* Please enter your E-mail.</small> 
         <small class="error" ng-show="frm.email[$index].$error.email">* Invalid email.</small> 
        </span> 
       </div> 

      </div> 
     </form> 

     <button ng-click="test()">test</button> 

     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
     <script> 
      var app = angular.module("app",[]); 
      app.controller('testController',['$scope', function($scope){ 

       $scope.quantity = 1; 
       $scope.submitted = false; 
       $scope.numberOfWorkers = [1]; 
       $scope.workers = []; 

       $scope.getNumber = function (num) { 
        return new Array(num); 
       }; 

       $scope.test = function(){ 

        console.log($scope.workers); 
       }; 

       $scope.changed = function() { 
        $scope.workers = []; 
        $scope.numberOfWorkers = new Array(parseInt($scope.quantity)); 
       } 


       $scope.isUndefined = function (thing) { 
        var thingIsUndefined = (typeof thing === "undefined"); 

        return thingIsUndefined; 
       }; 

       $scope.showErrors = function (field) { 
        var fieldIsUndefined = $scope.isUndefined(field); 

        if (fieldIsUndefined == false) 
        { 
         var stateInvalidIsUndefined = $scope.isUndefined(field.$invalid); 
         var stateDirtyIsUndefined = $scope.isUndefined(field.$dirty); 

         return (fieldIsUndefined == false && stateInvalidIsUndefined == false && stateDirtyIsUndefined == false && 
          (field.$invalid && field.$dirty)); 
        } 
        return false; 
       }; 

      }]); 
     </script> 
    </body> 
</html>

有沒有辦法顯示和驗證使用索引位置的字段？

frm.firstName.$error.minlength

上面的代碼適用於第一個塊，但它將消息顯示給所有副本。

來源

2015-11-28 Thiago Custodio

只是一個指針，你可以嘗試使用'$ index'動態設置'ID'並相應地進行處理。 – Rajesh

沒有辦法只使用名稱屬性？ –

由於您正在循環運行，因此您將擁有多個具有相同名稱的元素，您將不得不編寫額外的代碼來處理它。另一種方法可能是，創建一個有效的函數並將'$ index'作爲參數。 – Rajesh

我覺得這個沿着你想要達到什麼樣的臺詞：

http://plnkr.co/edit/HVwnRfvt30WrsteY6DvW

我們需要一個動態name分配給每個輸入字段，通過使用ngRepeat的$index方式：

<form name="form"> 
    <div ng-repeat="entry in array track by $index"> 
     <input type="text" name="someField{{$index}}"> 
    <div> 
</form>

而基於項目的array數量，我們可以在一個循環訪問使用信達的每個動態創建someField X如下：

form['someField' + $index]

在你的情況，讓我們說我們有三個工人和第二個工人的firstName是無效的 - 在ngRepeat，它應該是這樣的：

<div ng-repeat="i in numberOfWorkers track by $index"> 
    isValid? --> form.firstName{{$index}}.$valid = {{form['firstName' + $index].$valid}} 
    </div>

輸出：

isValid? --> form.firstName0.$valid = true 
isValid? --> form.firstName1.$valid = false 
isValid? --> form.firstName2.$valid = true

來源

2015-11-28 19:31:11 lux

使用索引位置的字段上的驗證

回答

相關問題