Currently, I am working on a form in AngularJS that includes groups of radio buttons. One of my goals is to provide users with an error count for the form. However, I have encountered a peculiar issue:
After implementing this code to keep track of errors on the form, I noticed an unexpected behavior.
$scope.numberoferrors = function(form) {
var count = 0,
errors = form.$error;
angular.forEach(errors, function(val) {
if (angular.isArray(val)) {
count += val.length;
}
});
return count;
};
For instance, when I create a group of two required radio buttons and leave both unselected, form.$error reports two errors instead of one (one per input). Strangely, once one of the radio buttons is chosen, the error count returns to zero as expected.
<form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController">
Errors: {{numberoferrors(myForm)}}
<input type="radio" ng-model="test" value="yes" required> Yes
<input type="radio" ng-model="test" value="no" required> No
</form>
Is there a way to achieve a more precise error count for forms?
Check out this Plunkr for further reference.