Kontrollkästchen erforderlich AngularJS

Ich habe ein Formular, wo Benutzer Fragen über Kontrollkästchen beantworten müssen. Es gibt ziemlich wenige Checkboxen und ich benutze AngularJS im Formular, um es zu validieren. Eine grundlegende Validierung besteht darin, dass alle erforderlichen Felder ausgefüllt sind.Kontrollkästchen erforderlich AngularJS

Unten ist mein Beispielcode:

<input type="checkbox" name="skills"> IT 
<input type="checkbox" name="skills"> Design 
<input type="checkbox" name="skills"> Photoshop 
<input type="checkbox" name="skills"> Writing

Jetzt möchte ich die Kontrollkästchen so von den „Fähigkeiten“ erforderlich werden Optionen, um die Benutzer atleast Kontrollen 1 Kasten.

Ich habe versucht, die required Tag, aber es schien nicht zu funktionieren.

Im AngularJS mit meiner Form zu validieren, wie so

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

Jede Idee, wie ich dieses Problem beheben? Wenn Sie Geige arbeiten können, wäre das toll.

Quelle

2017-02-01 Skywalker

Es hängt von Ihrem ng-Modell. Wenn Sie alle Werte in ein Array füllen, können Sie 'myArray.length' – nivas

@nivas verwenden, da mehr als ein Element aktiviert werden kann. Ich benutze eine JavaScript-Funktion, um alle Kontrollkästchen zu durchlaufen und alle" aktivierten "zu" drücken " Boxen in ein Array. Und senden Sie dieses Array an meinen Server. Also habe ich das ng-Modell nicht benutzt. – Skywalker

dann können Sie Array-Länge rechts überprüfen – nivas

Wenn Sie ng-disabled = Verwendung zu validieren "myForm. $ Ungültig"

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>

Quelle

2017-02-01 12:14:14 fatema

diese Arbeits 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>

Quelle

2017-02-01 11:19:10

Sie einen Array, dies zu tun verwenden können:

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>

Quelle

2017-02-01 11:47:18

Einige Bugs sind in dieser Antwort enthalten. Wenn Sie auf mehr als ein Kontrollkästchen klicken und ein Kontrollkästchen deaktivieren, wird die Schaltfläche zum Senden deaktiviert, auch wenn einige Kontrollkästchen bereits aktiviert sind. –

Kontrollkästchen erforderlich AngularJS

Antwort

Verwandte Themen