javascript – 如何验证angularjs中的复选框？

通常我使用formName.inputName.$invalid来显示错误消息输入,如下所示：

<input name="myInput" minlength="3" />
<span ng-show="myForm.myInput.$invalid">too short</span>

这不会是个问题.

但是当我试图验证复选框时,似乎很难,最后有片段.

我希望用户至少应选中一个复选框,或者您收到警告消息的效果.

我怎么能以最简单的方式做到这一点？

// app.js

var formApp = angular.module('formApp',[])

    .controller('formController',function($scope) {

        // we will store our form data in this object
        $scope.formData = {};

        $scope.formData.favoriteColors = [{
            'id':'1','name':'red'
        },{
            'id':'2','name':'green'
        },{
            'id':'3','name':'blue'
        }];

        $scope.cList = [];
        $scope.checkList = function(index){
            if($scope.myForm.favoriteColors.$pristine){
                $scope.cList.push($scope.formData.favoriteColors[index]);
            }
            else{
                angular.forEach($scope.formData.favoriteColors,function(value,key){
                    if(value.checked){
                        $scope.cList.push(value.id);
                    }
                });
            }
            console.log('cList:%o',$scope.cList);
        };

    });

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>

    <!-- CSS -->
    <!-- load up bootstrap and add some spacing -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
    <style>
        body         { padding-top:50px; }
        form         { margin-bottom:50px; }
    </style>

    <!-- JS -->
    <!-- load up angular and our custom script -->
    <script src="lib/angular/angular.min.js"></script>
    <script src="app.js"></script>
</head>

<!-- apply our angular app and controller -->
<body ng-app="formApp" ng-controller="formController">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">

    <h2>Angular CheckBoxes and Radio Buttons</h2>

    <form name="myForm">
        <!-- NAME INPUT -->
        <div class="form-group">
            <label>Name</label>
            <input type="text" class="form-control" name="name" ng-model="formData.name">
        </div>
        <!-- MULTIPLE CHECKBoxES -->
        <label>Favorite Colors</label>
        <div class="form-group">
            <label class="checkBox-inline" ng-repeat="color in formData.favoriteColors">
                <input type="checkBox" name="favoriteColors" ng-model="color.checked" ng-click="checkList($index)" required>{{color.name}}
            </label>
            <span class="danger" ng-show="myForm.favoriteColors.$invalid">Please check one color at least</span>
        </div>

        <!-- SUBMIT BUTTON (DOESNT DO ANYTHING) -->
        <button type="submit" class="btn btn-danger btn-lg">Send Away!</button>
    </form>

    <!-- SHOW OFF OUR FORMDATA OBJECT -->
    <h2>Sample Form Object</h2>
    <pre>
        dirty:{{ myForm.favoriteColors.$dirty }}
        pristine:{{ myForm.favoriteColors.$pristine }}
        valid:{{ myForm.favoriteColors.$valid }}
        invalid:{{ myForm.favoriteColors.$invalid }}
        error:{{ myForm.favoriteColors.$error }}
    </pre>

</div>
</body>
</html>

这是现场演示：http://jsbin.com/yigujoporu/1/

解决方法

我使用count funtcion来更新已选中复选框的数量.

这是现场演示：http://jsbin.com/wowipi/4/edit?js,output

javascript – 如何验证angularjs中的复选框？

解决方法

相关推荐