Question

假设我有10行的表格，每行有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...")
    }
};

怎么做？在哪里添加验证功能？

Answer 1

我最近使用自定义指令 answered a similar question ，该指令允许用户定义控件组（文本字段，选择，复选框等）并要求每个控件至少包含一个控件小组不空。

应该很容易修改，以便至少两个控件不为空然后myForm.$valid将始终是“最新的”（因此您可以使用它来提供视觉反馈或允许提交表单）。

Answer 2

如果您的复选框在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指令。

自定义角度js验证

2 个答案: