diff --git a/src/types/multiCheckbox.js b/src/types/multiCheckbox.js index b39404b..da4a1bc 100644 --- a/src/types/multiCheckbox.js +++ b/src/types/multiCheckbox.js @@ -14,6 +14,14 @@ export default ngModule => { valueProp: c.string.optional }) }, + defaultOptions: { + ngModelAttrs:{ + required: { + attribute: '', + bound: '' + } + } + }, apiCheckInstance: c, controller: /* @ngInject */ function($scope) { const to = $scope.to; @@ -23,6 +31,14 @@ export default ngModule => { change: setModel }; + function checkValidity(expressionValue){ + var valid = angular.isArray($scope.model[opts.key]) && + $scope.model[opts.key].length > 0 && + expressionValue; + + $scope.fc.$setValidity('required', valid); + } + function setModel() { $scope.model[opts.key] = []; angular.forEach($scope.multiCheckbox.checked, (checkbox, index) => { @@ -30,8 +46,27 @@ export default ngModule => { $scope.model[opts.key].push(to.options[index][to.valueProp || 'value']); } }); + + // Must make sure we mark as touched because only the last checkbox due to a bug in angular. + $scope.fc.$setTouched(); + checkValidity(true); + } + + if(opts.expressionProperties && opts.expressionProperties.required){ + $scope.$watch($scope.options.expressionProperties.required, function(newValue){ + checkValidity(newValue); + }); + } + + if($scope.to.required){ + var unwatchFormControl = $scope.$watch('fc', function(newValue){ + if(!newValue){ return; } + checkValidity(true); + unwatchFormControl; + }); } } }); } + };