I've tried to use the html5 required
attribute for my group of checkboxes but I don't find a nice way to implement it with ng-form.
When a checkbox is checked I want the value of that input-element to be pushed to an array of values.
The angular required validator seems to watch the ng-model associated with the input element, but how can I link several checkboxes to the same model and update it's value with the value of the input field?
Right now the implementation is like this fiddle.
<div ng-controller="myCtrl">
<ng-form name="myForm">
<span ng-repeat="choice in choices">
<label class="checkbox" for="{{choice.id}}">
<input type="checkbox" required="required" value="{{choice.id}}" ng-click="updateQuestionValue(choice)" ng-model="choice.checked" name="group-one" id="{{choice.id}}" />
{{choice.label}}
</label>
</span>
<input type="submit" value="Send" ng-click="submitSurvey(survey)" ng-disabled="myForm.$invalid" />
</ng-form>
</div>
The updateQuestionValue-function handles the adding or removing from the array of values but each checkbox has it's own model and that is why each checkbox needs to be checked in order for the form to be valid.
I've got it to work on a group of radio buttons, but they all work on the same model as only one can be selected.