required checkbox group

Question

Я пытаюсь проверить группу группы с ячейками, где требуется не менее . Это HTML моих флажков:

<fieldset class="requiredcheckboxgroup"> 
    <legend>How did you come into contact with VK?*</legend> 
    <input ng-model="application.contact.relations" group-required required type="checkbox" name="appcontact" value="relations" id="app-contact-relations" />relations<br> 
    <input ng-model="application.contact.employees" group-required required type="checkbox" name="appcontact" value="employees" id="app-contact-employees" contact-employees />employees<br> 
     <input ng-model="application.contact.employeesWho" type="text" placeholder="Who?" name="appcontact-employeeswho" id="app-contact-employees-who" disabled /> 
    <input ng-model="application.contact.jobad" group-required required type="checkbox" name="appcontact" value="jobad" id="app-contact-jobad" />jobad<br> 
    <input ng-model="application.contact.website" group-required required type="checkbox" name="appcontact" value="website" id="app-contact-website" />website<br> 
    <input ng-model="application.contact.other" group-required required type="checkbox" name="appcontact" value="other" id="app-contact-other" />other<br> 
</fieldset> 

Как вы можете увидеть все мои флажки имеет необходимого атрибут и требуемые для группового атрибута. У меня есть директива, как это:

angular.module('dxs-vkgroupApp').directive('groupRequired', group_required); 

function group_required() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attr) { 
      var requiredCheckboxes = jQuery('.requiredcheckboxgroup :checkbox[required]'); 

      requiredCheckboxes.change(function(){ 
       if(requiredCheckboxes.is(':checked')) { 
        requiredCheckboxes.removeAttr('required'); 
       } 

       else { 
        requiredCheckboxes.attr('required', 'required'); 
       } 
      }); 
     } 
    }; 
} 

Проблема заключается в том, что они все должны быть выбраны, прежде чем форма действительна .... Обязательный атрибут правильно удаляется, когда он выбран, но когда я пытаюсь отправить форму, он все еще недействителен.

Как я могу это исправить? Или есть лучший способ решить это?

Answer 1

Вы можете попробовать создать функцию, которая определяет, если выбран какой-либо флажок:

angular('module').controller('MyController', function(){ 
    this.application = { contact: {} }; 

    this.noneSelected = function() { 
     return !(application.contact.relations || application.contact.employees) /* ... */; 
    } 
} 

А потом на ваш HTML:

<div ng-controller="MyController as ctrl"> 
<fieldset class="requiredcheckboxgroup"> 
    <legend>How did you come into contact with VK?*</legend> 
    <input ng-model="ctrl.application.contact.relations" ng-required="ctrl.noneSelected()" type="checkbox" name="appcontact" value="relations" id="app-contact-relations" />relations<br> 
    <input ng-model="ctrl.application.contact.employees" ng-required="ctrl.noneSelected()" type="checkbox" name="appcontact" value="employees" id="app-contact-employees" contact-employees />employees<br> 
     <!-- .... --> 
</fieldset> 
</div> 

Answer 2

директива должна связать событие изменения. Вот как это должно быть

<fieldset class="requiredcheckboxgroup"> 
    <legend>How did you come into contact with VK?*</legend> 
    <input ng-model="application.contact.relations" ng-required="selected" group-required type="checkbox" name="appcontact" value="relations" id="app-contact-relations" />relations 
    <br> 
    <input ng-model="application.contact.employees" ng-required="selected" group-required type="checkbox" name="appcontact" value="employees" id="app-contact-employees" contact-employees />employees 
    <br> 
    <input ng-model="application.contact.employeesWho" type="text" placeholder="Who?" name="appcontact-employeeswho" id="app-contact-employees-who" disabled /> 
    <input ng-model="application.contact.jobad" ng-required="selected" group-required type="checkbox" name="appcontact" value="jobad" id="app-contact-jobad" />jobad 
    <br> 
    <input ng-model="application.contact.website" ng-required="selected" group-required type="checkbox" name="appcontact" value="website" id="app-contact-website" />website 
    <br> 
    <input ng-model="application.contact.other" ng-required="selected" group-required type="checkbox" name="appcontact" value="other" id="app-contact-other" />other 
    <br> 
</fieldset> 

директива должна быть

var app = angular.module('dxs-vkgroupApp', []); 

app.controller('testCtrl', ['$scope', function($scope) { 

     $scope.selected = true; 

    }]); 

    app.directive('groupRequired', group_required); 

    function group_required() { 
     return { 
      restrict: 'A', 
      link: function(scope, element, attr) {      
       element.bind("change", function(){ 
        var requiredCheckboxes = jQuery('.requiredcheckboxgroup input:checked').length;       
        if(requiredCheckboxes > 0) 
         scope.selected = false; 
        else 
         scope.selected = true; 
        scope.$apply(); 
       }) 
      } 
     }; 
    }