I have created an angular directive to validate a list of percentages that must sum up to 100%. The problem is that the validity of one field depends on the validity of another. The first thing I do in my directive is to try and set the form validity to valid to alleviate this - but this requires access to the form INgFormController and I only have direct access to the current form input field
link: function ($scope: angular.IScope, element: JQuery, attributes: ITimePercentageAttributes, ctrl: angular.INgModelController /*: IArticleRegistrationsController*/) {
if (!ctrl) return;
ctrl.$validators["percentage"] = function (modelValue, viewValue) {
(<IArticleRegistrationsScope>$scope.$parent.$parent).timeRegistrationForm.$setValidity("percentage", true, ????????)
//...calculate sum and return true/false...
The $setValidity method is missing the third argument here.
The relevant HTML template code is below:
<form name="timeRegistrationForm">
<div class="panel panel-info">
...
<table class="table panel-body">
<thead>
...
</thead>
<tbody>
<tr ng-repeat="timeAllocation in requisition.TimeAllocations">
<td class="adjust-padding-when-xs">
<input ng-model="timeAllocation.Percentage"
ng-model-options="{ updateOn: 'blur' }"
name="percentage{{$index}}"
ng-change="vm.percentageUsedChange(requisition)"
min="0"
max="100"
time-percentage />
</td>
</tr>
...
</tbody>
</table>
...
</div>
</form>