定製角JS驗證

可以說我有表有10行，每行中的複選框定製角JS驗證

之前用戶提交我想補充以下驗證的10列：每行至少兩個複選框中檢查！

<form name="myForm"> 
    <div data-ng-controller="myController"> 
     <table border="1"> 
      <tr> 
       <td><input type="checkbox" /></td> 
       <td><input type="checkbox" /></td> 
       <td><input type="checkbox" /></td> 
       <td><input type="checkbox" /></td> 
       <td><input type="checkbox" /></td> 
       <td><input type="checkbox" /></td> 
       <td><input type="checkbox" /></td> 
       <td><input type="checkbox" /></td> 
       <td><input type="checkbox" /></td> 
       <td><input type="checkbox" /></td> 
      </tr> 
      ... 
     </table> 

     <button data-ng-click="save()" ng-disabled="$myForm.invalid">Save</button> 
</form> 


$scope.save = function() { 
    if (myForm.$valid){ 
     alert("can submit the form...") 
    } 
};

如何做到這一點？在哪裏添加驗證功能？

來源

2014-06-22 john Smith

我最近answered a similar question與自定義指令，它允許用戶定義的對照組（文本字段，選擇，checkboxs，等等）以及要求每一個組中的至少一個控制不爲空。

應該很容易修改，以便至少有兩個控件不是空的。
Then myForm.$valid將始終爲「最新」（因此您可以使用它來給出視覺反饋或允許表單提交）。

來源

2014-06-22 11:10:23 gkalpak

這正是我期待的，有點長，但我認爲它應該是如何在Angular平臺..謝謝！ –

是的，實現有點長（雖然不多），但添加的功能並不是微不足道的。此外，你只在項目中包含它一次，然後它可以集成在任何視圖中，無需額外的代碼（無論是在控制器中還是在視圖中）:) – gkalpak

如果您的複選框中的HTML是靜態的，您可以綁定複選框布爾模型，如：

<input type="checkbox" ng-model="checked[1]"> 
<a href="javascript:;" data-ng-click="validate()">Validate</a>

，然後使用這樣的驗證

$scope.checked = {}; 
$scope.validate = function() { 
    var count=0; 
    angular.forEach($scope.checked, function(k,v){ if (k) count++; }); 
    if (count > 2) 
     alert("validated"); 
};

將其擴展到多個行是微不足道的。

你可以看到這方面的工作就在這裏：http://plnkr.co/edit/thbJ81KWUDyF6WTcWL9u?p=preview

當然你也可以定義在控制器的陣列，並結合這個想法使用ng-repeat指令。

來源

2014-06-22 11:18:04

回答

相關問題