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>

现在我被证实了。

我为此created a pen。

当表单有效时，

{{s.form。$ valid}} 应该为true，但只有在检查了组中的所有复选框时才返回true

{{s.form ['xxx']。$ valid}} 如果选中至少一个复选框，则应该为true，但只有在选中最后一个复选框时才会返回true < / p>

我希望能够从组中选择至少一个复选框（一个或多个）。如果选中至少一个，则表格和组将有效。

我怎样才能实现这一目标？已经尝试了很多东西，但无法使其发挥作用。

感谢。

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>

这是fiddle这个方法

Answer 2

这实际上很难，但我认为它现在有效。 Here's working demo

对于那些想知道我已经在我的应用中加入this module的人。

然后将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>

Angularjs复选框组验证（动态选项）

2 个答案: