обязательная группа флажков

Я пытаюсь проверить группу флажков, хотя требуется хотя бы один. Это 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');
                }
            });
        }
    };
}

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

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


javascript checkbox jquery angularjs required
person nielsv    schedule 09.06.2015    source источник
comment
Попробуйте использовать директиву ng-required и удалите еще один обязательный атрибут в своей форме.   -  person ArtemKh    schedule 09.06.2015
comment
возможный дубликат проверки флажка группы AngularJs   -  person Ramesh Rajendran    schedule 09.06.2015

Ответы (2)


arrow_upward
3
arrow_downward

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

 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>
person Joao Leal    schedule 09.06.2015
comment
А как насчет директивы, на которую вы ссылаетесь (контактные сотрудники)? Должен ли я использовать это также? - person nielsv; 09.06.2015
comment
Я скопировал это из вашего кода, не знаю, что делает эта директива - person Joao Leal; 09.06.2015
comment
это было бы в вашем контроллере - person Joao Leal; 09.06.2015

arrow_upward
0
arrow_downward

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

<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();
                })
            }
        };
    }
person robenrajan    schedule 09.06.2015