Menu
I have a form where users have to answer questions through checkboxes. There are quite few checkboxes and I'm using AngularJS in the form to validate it. A basic validation is that all the required fields are filled.
Below is my example code:
<input type="checkbox" name="skills"> IT
<input type="checkbox" name="skills"> Design
<input type="checkbox" name="skills"> Photoshop
<input type="checkbox" name="skills"> Writing
Now I want the checkboxes to be required so from the "skills" checkboxes the user atleast checks 1 box.
I've tried putting the required tag but it didn't seem to work.
Im using AngularJS to validate my form like so
<button ng-disabled="myForm.$invalid">Submit</button>
Any idea how I can fix this? If you can working fiddle that would great.
676
If you want to validate using ng-disabled="myForm.$invalid"
var app = angular.module('myModule', []);
app.controller("myController", function ($scope) {
$scope.choices = [{"name":"IT"},{"name":"Design"},{"name":"Technology"}];
$scope.checkBoxArray = [];
$scope.validate = function (value) {
if ($scope.checkBoxArray.indexOf(value) == -1){
$scope.checkBoxArray.push(value);
}
else {
$scope.checkBoxArray.splice($scope.checkBoxArray.indexOf(value), 1);
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myModule">
<body ng-controller="myController">
<ng-form name="myForm">
<span ng-repeat="choice in choices">
<input type="checkbox" name="skills" ng-required="checkBoxArray.length==0" ng-model="choice.checked" ng-change="validate(choice.name)">
{{choice.name}}
</span>
</ng-form>
<button ng-disabled="myForm.$invalid">Submit</button>
</body>
</html>Try this working demo :
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<form name="checkBoxForm">
<input type="checkbox" name="skills" ng-model="IT">IT
<input type="checkbox" name="skills" ng-model="Design">Design
<input type="checkbox" name="skills" ng-model="Photoshop">Photoshop
<input type="checkbox" name="skills" ng-model="Writing">Writing
<button ng-disabled="!IT&&!Design&&!Photoshop&&!Writing">Submit</button>
</form>
</div>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
