All geek questions in one place

AngularJS checkboxes required

I have a form where users should answer questions through checkboxes. There are very few checkboxes, and I use AngularJS in the form to check it out. The main check is to fill in all the required fields.

Below is my sample 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 at least checks 1 field .

I tried putting the required tag, but it doesn't seem to work.

Im using AngularJS to validate my form so

 <button ng-disabled="myForm.$invalid">Submit</button>

Any idea how I can fix this? If you can work, that's great.

+6
source share
3 answers

If you want to check with 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>
+2
source

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>
+1
source

You can use an array for this:

 var myApp = angular.module('myApp',[]); myApp.controller('MyCtrl',function($scope) { $scope.collection=[{ "Name": "IT"}, { "Name": "Design"}, { "Name": "Photoshop"}, { "Name": "Writing"}]; $scope.disableButton = true; $scope.doTheThings = function (item) { if (item.checked) $scope.disableButton = true; else $scope.disableButton = false; } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="MyCtrl"> <ul> <li ng-repeat="item in collection"> <input type="checkbox" name="skills" ng-model="item.checked" ng-click="doTheThings(item)"> {{item.Name}} </li> </ul> <button ng-disabled="disableButton"> Submit </button> </form> </div>
0
source

Source: https://habr.com/ru/post/1014615/

More articles:


All Articles