使用AngularJS的复选框和必需项

Question

我已经尝试将html5 required属性用于我的复选框组,但我找不到用ng-form实现它的好方法.

选中复选框时,我希望将该input-element的值推送到值数组.

角度所需的验证器似乎观察与输入元素关联的ng模型,但是如何将多个复选框链接到同一模型并使用输入字段的值更新它的值？

现在,实现就像这个小提琴.

<div ng-controller="myCtrl">
  <ng-form name="myForm">
    <span ng-repeat="choice in choices">
      <label class="checkbox" for="{{choice.id}}">
        <input type="checkbox" required="required" value="{{choice.id}}" ng-click="updateQuestionValue(choice)" ng-model="choice.checked" name="group-one" id="{{choice.id}}" />
        {{choice.label}}
      </label>
    </span>
    <input type="submit" value="Send" ng-click="submitSurvey(survey)" ng-disabled="myForm.$invalid" />
  </ng-form>
</div>?

updateQuestionValue函数处理从值数组中添加或删除,但每个复选框都有自己的模型,这就是为什么需要检查每个复选框以使表单有效.

我已经让它在一组单选按钮上工作,但它们都在相同的模型上工作,因为只能选择一个.

Answer 1

如果要在没有选择的情况下禁用提交按钮,最简单的方法是在ng-disabled属性中检查数组的长度,而不设置必需的属性

<input type="submit" value="Send" ng-click="submitSurvey(survey)" 
 ng-disabled="value.length==0" />

请看这里更新小提琴

另一种方法是检查复选框的ng-required属性中的数组长度

<input type="checkbox" value="{{choice.id}}" ng-click="updateQuestionValue(choice)"
  ng-model="choice.checked" name="group-one" id="{{choice.id}}" 
  ng-required="value.length==0" />

第二小提琴

Answer 2

一些东西:

• 在这种情况下,我会采用刚刚更新整个数组的方法,因为它会简化代码.(如果你对$ scope.value数组内容做任何有状态的事情,你可能不想这样做,但它看起来不像你的那样).
• 你可以使用<form>而不是<ng-form>.
• 将提交功能从按钮移开ng-click并进入表单ng-submit.这使得使用angular的内置验证(如果您关心它),验证管理更容易一些
• 如果你的<label>包装你<input>不需要for=""属性.

这是一个更新的小提琴

这是代码:

<div ng-controller="myCtrl">
    <form name="myForm" ng-submit="submitSurvey(survey)">
        <span ng-repeat="choice in choices">
            <label class="checkbox">
            <input type="checkbox" required="required" value="{{choice.id}}" ng-change="updateQuestionValues()" ng-model="choice.checked" name="group-one" />
                {{choice.label}}
            </label>
        </span>
        <input type="submit" value="Send" ng-disabled="myForm.$invalid" />
    </form>
    {{value}}
</div>?

JS

function myCtrl($scope) {

    $scope.choices = [{
        "id": 1,
        "value": "1",
        "label": "Good"},
    {
        "id": 2,
        "value": "2",
        "label": "Ok"},
    {
        "id": 3,
        "value": "3",
        "label": "Bad"}];

    $scope.value = [];

    $scope.updateQuestionValues = function() {
        $scope.value = _.filter($scope.choices, function(c) {
            return c.checked;
        });
    };
}?

Answer 3

我刚刚添加了一个带有ng-model的隐藏输入,它与单选按钮的ng-model相同:

 <div class="radio" ng-repeat="option in item.AnswerChoices | orderBy: DisplayOrder">
        <input type="radio" ng-model="item.Answer" name="mulchoice" value="{{option.DisplayName}}" />
        <span>{{option.DisplayName}}</span>
    <input type="hidden" ng-model="item.Answer" name="hiddenradiobuttoninput" required/>
 </div>