Using checkboxes and required with AngularJS

Question

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 che

Answer 1

<ul  class="list-group">
  <li ng-repeat='animal in animals' class="list-group-item">
    <label>
      <input type="checkbox"
        ng-model="xyx"
        ng-click="toggleAnimal(animal)"
        ng-checked="selectedAnimals.indexOf(animal) > -1"
        ng-required="selectedAnimals.length == 0" /> 
        {{animal}}</label>
  </li>                  
</ul>

$scope.toggleAnimal = function(animal){
    var index = $scope.selectedAnimals.indexOf(animal);
    if(index == -1) {
      $scope.selectedAnimals.push(animal);
    }
    else{
      $scope.selectedAnimals.splice(index, 1);
    }
}

See the full detail and demo and other related examples

Answer 2

I just added a hidden input with ng-model that's the same as your ng-model for the radio button:

 <div class="radio" ng-repeat="option in item.AnswerChoices | orderBy: DisplayOrder">
        <input type="radio" ng-model="item.Answer" name="mulchoice" value="{{option.DisplayName}}" />
        <span>{{option.DisplayName}}</span>
    <input type="hidden" ng-model="item.Answer" name="hiddenradiobuttoninput" required/>
 </div>

Answer 3

Why not make your checkbox models the array

<input type="checkbox" ng-model="value[$index]" value="{{choice.id}}/>

Fiddle: http://jsfiddle.net/thbkA/1/

Answer 4

If you want the submit button disabled if no choice is selected the easiest way is to check the length of the array in the ng-disabled attribute, without setting the required attribute

<input type="submit" value="Send" ng-click="submitSurvey(survey)" 
 ng-disabled="value.length==0" />

See here for updated fiddle

Another way to do this would be to check the array length in the ng-required attribute of the checkboxes

<input type="checkbox" value="{{choice.id}}" ng-click="updateQuestionValue(choice)"
  ng-model="choice.checked" name="group-one" id="{{choice.id}}" 
  ng-required="value.length==0" />

Second fiddle

Answer 5

A few things:

• I would go with an approach that just updated the entire array in this case, as it would simplify the code a little. (You might not want to do this if you're doing anything stateful with the $scope.value array contents, but it doesn't look like you are).
• you can just use <form> rather than <ng-form>.
• move the submit function off of the button's ng-click and into the form's ng-submit. This makes validation management a little easier with angular's built-in validation (if you care about that)
• If your <label> wraps your <input> you don't need the for="" attribute.

Here is an updated fiddle for you

And here's the code:

<div ng-controller="myCtrl">
    <form name="myForm" ng-submit="submitSurvey(survey)">
        <span ng-repeat="choice in choices">
            <label class="checkbox">
            <input type="checkbox" required="required" value="{{choice.id}}" ng-change="updateQuestionValues()" ng-model="choice.checked" name="group-one" />
                {{choice.label}}
            </label>
        </span>
        <input type="submit" value="Send" ng-disabled="myForm.$invalid" />
    </form>
    {{value}}
</div>​

JS

function myCtrl($scope) {

    $scope.choices = [{
        "id": 1,
        "value": "1",
        "label": "Good"},
    {
        "id": 2,
        "value": "2",
        "label": "Ok"},
    {
        "id": 3,
        "value": "3",
        "label": "Bad"}];

    $scope.value = [];

    $scope.updateQuestionValues = function() {
        $scope.value = _.filter($scope.choices, function(c) {
            return c.checked;
        });
    };
}​