Question

我有一个问题的多个复选框。需要选择至少一个复选框。如果没有选中的复选框，则应通过验证错误。我想念任何内容。关于我如何能够实现这种行为的任何想法？我的.JS代码：

$scope.onCheckBoxSelected=function(){

                            var flag=false;
                            for(var key in selectedOptions){
                                console.log('Key -' +key +' val- '+selectedOptions[key]);
                                if(selectedOptions[key]){
                                    flag=true;
                                }
                            }
                            if(!flag){
                                selectedOptions=undefined;
                            }
                        };

下面是我的HTML代码：

<div class="grid">
    <div class="col flex-10  mandatoryField" ng-class="{error: (!selectedOptions && formMissingFields)}">Hello please select atleast one</div>
    <div class="col flex-2">
    </div>
    <div class="col flex-5">

        <div style="padding-top: 2px">
            <input type="checkbox" name="apple" title="Select type" value="apple" ng-model="apple" ng-change="onCheckBoxSelected()">apple
            </input>
        </div>
        <div style="padding-top: 2px">
            <input type="checkbox" name="orange" title="Select type" value="orange" ng-model="orange" ng-change="onCheckBoxSelected()">orange
            </input>
        </div>
        <div style="padding-top: 2px">
            <input type="checkbox" name="banana" title="Select type" value="banana" ng-model="banana" ng-change="onCheckBoxSelected()">banana
            </input>
        </div>

    </div>

</div>

Answer 1

您可以更简单，无需ngChange事件。

<div ng-class="{error: !apple && !orange && !banana">Hello please select atleast one</div>

Answer 2

使用AngularJS表单进行复选框验证的最佳做法 - 如果您打算扩展表单，它也会对您有所帮助。您必须重构代码才能使用此功能。

 <ng-form name="myForm">
    <span style="color:red;" ng-show="myForm.$invalid">Please select one</span>
    <br />
    <!-- your checkbox values will be in "choices" -->
    <p ng-repeat="choice in choices">
      <label class="checkbox" for="{{choice.id}}">
        <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" /> {{choice.label}}
      </label>
    </p>
    <input type="submit" value="Send" ng-click="submitSurvey(survey)" ng-disabled="myForm.$invalid" />
  </ng-form>

请参阅此fiddle - 请注意它使用underscore.js。此外，this question可能有所帮助。

复选框验证angularjs

2 个答案: