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.
Inside the function, a FOR loop is executed over the JSON array and the Selected property of each CheckBox is verified whether it is True. If at-least one CheckBox is checked, then the validation is successful else an error message is displayed using AngularJS.
It updates the array when the checkboxes change, and updates the checkboxes when the array changes. app. directive('checkList', function() { return { scope: { list: '=checkList', value: '@' }, link: function(scope, elem, attrs) { var handler = function(setup) { var checked = elem. prop('checked'); var index = scope.
How do I make a checkbox readonly in AngularJS? AngularJS ng-readonly Directive The ng-readonly directive sets the readonly attribute of a form field (input or textarea). The form field will be readonly if the expression inside the ng-readonly attribute returns true.
The ng-checked Directive in AngularJS is used to read the checked or unchecked state of the checkbox or radio button to true or false. If the expression inside the ng-checked attribute returns true then the checkbox/radio button will be checked otherwise it will be unchecked.
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
A few things:
<form>
rather than <ng-form>
.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)<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; }); }; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With