AngularJS Checkbox and $validators - angularjs

Question

I have a list of checkboxes that are backed by a model that is an array of ids.
<input type="checkbox" name="checkers" value="black" ng-model="board" />
<input type="checkbox" name="checkers" value="white" ng-model="board" />
the model would look like:
[ 'black', 'white' ]
so there is a number of 'hacks' to get this to work like one would think and even a directive checklist-model.
My problem is I have a directive that does dynamic validation using ngModelController's $validators. That directive looks something like this:
module.directive('validator', function($parse) {
return {
restrict: 'A',
require: '?ngModel',
link: function($scope, $element, $attrs, ngModelCtrl) {
var rules = $parse($attrs.validator)($scope);
ngModelCtrl.$validators.myValidator = function(val){
// this is simplified, real case is much more complex
if(rules.minSelections > 0){
return !(val.length <= rules.minSelections);
}
if(rules.required){
return !val.length;
}
}
}
}
});
I attached it to my checkboxes like:
<input type="checkbox" name="checkers" val="black" validators="{ minSelections: 1 }" ng-model="board" />
<input type="checkbox" name="checkers" val="white" validators="{ minSelections: 1 }" ng-model="board" />
problem is the val in the myValidator validation always returns true/false. I can't ever seem to get ahold of the 'actual' model I need despite several different approaches and even using that directive. On a note: the $validators runs BEFORE the click on that directive.
Does anyone have any suggestions?

Answer 1

I ended up creating my own checkbox directive and manually triggering validation to happen.
If you take a look below, you can see how I watch the collection and if the value has changed I commit the value and re-trigger the validation manually.
Heres the code for others:
define(['angular'], function (angular) {
// Use to style checkboxes, bind checkboxes to arrays, and run validators on checkboxes
// Modified from: https://github.com/bkuhl/angular-form-ui/tree/master/src/directives/checkBox
var module = angular.module('components.checkbox', []);
/**
* <check-box ng-model="isChecked()"></check-box>
* Required attribute: ng-model="[expression]"
* Optional attribute: value="[expression]"
*/
module.directive('checkBox', function () {
return {
replace: true,
restrict: 'E',
scope: {
'externalValue': '=ngModel',
'value': '&'
},
require: 'ngModel',
template: function (el, attrs) {
var html = '<div class="ngCheckBox' + ((angular.isDefined(attrs.class)) ? ' class="'+attrs.class+'"' : '') + '">'+
'<span ng-class="{checked: isChecked}">' +
'<input type="checkbox" ng-model="isChecked"' + ((angular.isDefined(attrs.id)) ? ' id="'+attrs.id+'"' : '') + '' + ((angular.isDefined(attrs.name)) ? ' name="'+attrs.name+'"' : '') + '' + ((angular.isDefined(attrs.required)) ? ' name="'+attrs.required+'"' : '') + '/>'+
'</span>'+
'</div>';
return html;
},
controller: function ($scope) {
if (angular.isArray($scope.externalValue)) {
$scope.isChecked = $scope.externalValue.indexOf($scope.value()) >= 0;
} else {
$scope.isChecked = !!$scope.externalValue;
}
$scope.$watch('isChecked', function (newValue, oldValue) {
if (angular.isDefined(newValue) && angular.isDefined(oldValue)) {
//add or remove items if this is an array
if (angular.isArray($scope.externalValue)) {
var index = $scope.externalValue.indexOf($scope.value());
if(newValue) {
if( index < 0 ) $scope.externalValue.push($scope.value());
} else {
if( index >= 0 ) $scope.externalValue.splice(index, 1);
}
} else {
//simple boolean value
$scope.externalValue = newValue;
}
}
});
},
link: function ($scope, $elm, $attrs, ngModel) {
$scope.$watchCollection('externalValue', function(newVal) {
if (newVal.length) {
ngModel.$setTouched();
ngModel.$commitViewValue();
ngModel.$validate();
}
});
}
};
});
return module;
});