Проверка группы флажков Angularjs (динамические параметры)

Question

Допустим, у меня есть этот объект вопроса:

$scope.question = {
    id: 1,
    question: 'q?',
    required: true,
    control: {
        type: 'multiple_check',
        options: [{
            value: '1st option'
        }, ... ]
    }
}

И эта форма:

<form name="s.form" novalidate>
    <h1>{{ question.question }}</h1>
    <label ng-repeat="option in question.control.options">
        <input type=" name="xxx"
            ng-model="question.answer[$index]" ng-required="question.required" />
        {{ option.value }}
    </label>
</form>

И я застрял сейчас с проверкой.

Я создал ручку для этого.

{{s.form. $ valid}} должен давать мне true, когда форма верна, но возвращает true только тогда, когда отмечены все флажки в группе.

{{ s.form['xxx'].$valid }} должен давать мне значение true, когда установлен хотя бы один флажок, но на самом деле он возвращает значение true, только если установлен последний флажок

Я хочу иметь возможность выбрать хотя бы один флажок (один или несколько) из группы. Если хотя бы один из них отмечен, форма и группа будут действительными.

Как я могу этого достичь? Уже много чего перепробовал, но не могу заставить это работать.

Благодарю.

Answer 1

Вы можете сделать свою собственную проверку, установив флажок ниже

$scope.$watch( "question.control.options" , function(n,o){
    var trues = $filter("filter")( n , {value:true} );
    $scope.flag = trues.length;
}, true );

Примечание: значение флажка должно быть логическим, поэтому измените значение вашего вопроса как

$scope.question = {
    id: 1,
    question: 'q?',
    required: true,
    control: {
        type: 'multiple_check',
        options: [{
            value: false,
            label: '1st option'
        }, ... ]
    }
}

и ваш взгляд как

<form name="s.form" novalidate>
    <h1>{{ question.question }}</h1>
    <label ng-repeat="option in question.control.options">
        <input type=" name="xxx"
        ng-model="question.control.options.value" ng-required="question.required" />
        {{ option.label }}
    </label>
</form>

вот скрипка такой подход

Answer 2

Это было на самом деле сложно, но я думаю, что это работает сейчас. Вот рабочая демка

Для тех, кто хочет знать, я включил этот модуль в свое приложение.

Затем изменил код HTML на:

<form name="s.form" novalidate>

   form valid? <b>{{ s.form.$valid | json }}</b>

   <div ng-repeat="question in questions">
        <h1>{{ question.question }}</h1>
        <label ng-repeat="option in question.control.options">
            <input type="checkbox" name="xxx_{{ question.id }}"
            checklist-model="question.answer" checklist-value="option" ng-required="question.required && !question.answer.length" />
            {{ option.value }}
        </label>

        <p>question valid? {{ s.form['xxx_'+question.id].$valid | json }}</p>
        answer: {{ question.answer }}
    </div>

</form>