Consider a scenario where there is a table comprising of 10 rows and each row contains 10 columns of checkboxes.
Prior to the user submitting the form, it is necessary to implement a validation rule: at least two checkboxes must be checked in each row!
<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...")
}
};
How can this be achieved? Where should the validation logic be incorporated?