Wie benötigt man mindestens 1 Checkbox mit Checklistenmodell für AngularJS Form Validation?

Question

Ich habe kleines Formular mit 2 Datumseingabe und eine Checkliste, die alle Kontrollkästchen sind. Ich konnte nicht herausfinden, wie man eines der Checkboxen in der Liste für die Formularvalidierung benötigt. Wenn ich ng-required für ein Kontrollkästchen anschließe, wird es für alle Kontrollkästchen wiederholt. Kann jemand darüber wissen, wie man die Checkbox als erforderliches Formularelement benötigt. aber ich möchte nicht alle Elemente auswählen, um die Form gültig zu machen. Wenn also nur eines der Formularfelder, die die Checkboxen sind, ausgewählt wurde, muss das Formular gültig sein, ansonsten ungültig.

angular.module('frmApp', [ 
 
    'ui.bootstrap', 'angularMoment' 
 
    ]) 
 
    .controller('Frm Controller', [ 
 
    '$scope', 
 
    function($scope) { 
 

 
     $scope.invDets = $stateParams.details; 
 
     $scope.allowanceObj = {}; 
 
     $scope.finCompWithLogo = []; 
 

 
     $scope.validUntil = new Date(); 
 
     $scope.recentDate = new Date(); 
 

 
     // Disable weekend selection 
 
     $scope.disabled = function(date, mode) { 
 
     return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6)); 
 
     }; 
 
     $scope.openedPayment = false; 
 
     $scope.openedAllowance = false; 
 
     $scope.openPayment = function($event, elementOpened) { 
 
     \t $scope.paymentDueDate = new Date(); 
 
     /*$scope.openedPayment = !$scope.openedPayment;*/ 
 
     $event.preventDefault(); 
 
     $event.stopPropagation(); 
 

 
     $scope[elementOpened] = !$scope[elementOpened]; 
 
     }; 
 
     $scope.openAllowance = function($event, elementOpened) { 
 
     \t \t $scope.allowanceDueDate = new Date(); 
 
     /*$scope.openedAllowance = !$scope.openedAllowance;*/ 
 
     $event.preventDefault(); 
 
     $event.stopPropagation(); 
 

 
     $scope[elementOpened] = !$scope[elementOpened]; 
 
     }; 
 

 
     $scope.dateOptions = { 
 
     'year-format': "'yy'", 
 
     'starting-day': 1, 
 
     'minDate': new Date() 
 
     }; 
 
     $scope.doSomething = function (frm) { 
 
$http.post('/someUrl', frm, config).then(successCallback, errorCallback);  alert('Done something!!'); 
 
     } 
 
    } 
 
    ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div> 
 
    <form name="frm1" novalidate> 
 
    <div class="row"> 
 
     <div class="allowance-required-field"> 
 
     <div class="box"> 
 
      <div class="icon"> <i class="fa fa-calendar"></i> </div> 
 
      <div class="field-title">Payment</div> 
 
      <div class="input-group"> 
 
      <input type="text" class="form-control" uib-datepicker-popup="dd-MM-yyyy" ng-click="openPayment($event, 'openedPayment')" ng-model="frm1.PaymentDueDate" show-weeks="false" is-open="openedPayment" datepicker-options="dateOptions" ng-required="true" 
 
      /> 
 
      <span class="input-group-btn"> 
 
          <button class="btn btn-default" ng-click="openPayment($event, 'openedPayment')"><i class="fa fa-calendar"></i></button> 
 
         </span> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 
     <div class="allowance-required-field"> 
 
     <div class="box"> 
 
      <div class="icon"> <i class="fa fa-calendar"></i> </div> 
 
      <div class="field-title">Delay</div> 
 
      <div class="input-group"> 
 
      <input type="text" class="form-control" uib-datepicker-popup="dd-MM-yyyy" ng-click="openAllowance($event, 'openedAllowance')" ng-model="frm1.AllowanceDueDate" show-weeks="false" is-open="openedAllowance" min-date="recentDate" max-date="frm1.PaymentDueDate" 
 
      datepicker-options="dateOptions" ng-required="true" /> 
 
      <span class="input-group-btn"> 
 
          <button class="btn btn-default" ng-click="openAllowance($event, 'openedAllowance')"><i class="fa fa-calendar"></i></button> 
 
         </span> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 

 
     <div class="pick-factoring-companies"> 
 
     <div class="box"> 
 
      <h2 class="text-center"> Choose One or More </h2> 
 
      
 
      <div class="text-center"> 
 
      <a href="" ng-click="checkAll()" class="btn btn-sm btn-default">Select All</a> 
 
      <a href="" ng-click="uncheckAll()" class="btn btn-sm btn-default">Deselect All</a> 
 
      </div> 
 
      <ul ng-required="true"> 
 
      <li ng-repeat="cmp in finCompWithLogo"> 
 
       <div ng-if="cmp" class="finance-company"> 
 

 
       <input id="{{'company-'+$index}}" type="checkbox" class="pick-faktoring" checklist-model="frm1.AllowanceCompanies" checklist-value="cmp.Identifier" ng-change="addCompany(cmp.Identifier)"> 
 
       <label for="{{'company-'+$index}}"> 
 
        <div class="img"> <img data-toggle="tooltip" data-placement="bottom" src="data:image/{{cmp.Logo[0].Type}};base64,{{cmp.Logo[0].Data}}" title="{{cmp.CompanyName}}"> </div> 
 
        <div class="title"> {{cmp.CompanyName}} </div> 
 
       </label> 
 
       </div> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="text-center"> 
 
     <a href="" ng-click="doSomething(frm1)" ng-disabled="frm1.$invalid" class="btn btn-lg btn-success">Send</a> 
 
    </div> 
 
    </form> 
 

 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
</div>

Answer 1

Gelöst! Ich habe versucht, mein Problem zu lösen.

<input id="{{'company-'+$index}}" type="checkbox" ng-model="cmp.Selected" ng-click="pushCompanyToArray(cmp)" 
    ng-required="frm1.AllowanceCompanies.length == 0" 
    ng-value="cmp.ID" ng-checked="all || cmp.Selected"/> 

das löst meine Frage. Für jeden, der die Lösung nicht finden konnte, löste dieses ng-request mein Problem.

Answer 2

Sie checklist-change verwenden können, um die Gültigkeit oder checklist-before-change zu setzen/deaktivieren Auswahl zu ermöglichen.

Hier ist ein Beispiel: http://jsfiddle.net/beradrian/nbwcbejw/

Wenn Sie gehen für checklist-change und $setValidity dann sollten Sie dies zunächst eingestellt.

Answer 3

Markieren Sie die Kontrollkästchen als ng-required, wenn die Liste leer ist.

<label ng-repeat="role in roles"> 
    <input ng-required="user.roles.length == 0" 
    type="checkbox" 
    checklist-model="user.roles" 
    checklist-value="role.id"> 
    {{role.text}} 
</label>