如何使用angularjs验证复选框(必填)?

时间:2015-08-24 17:52:23

标签: javascript angularjs checkbox

此页面列出带有复选框的商店。我需要在复选框中输入必填字段,如果在该复选框中没有选择任何内容我需要将此字段设置为错误消息并且未选中任何内容如果用户选择了该存储列表中的任何一个,则必须禁用提交按钮强制消息应该消失并且提交按钮应该是enable.i已经完成,但当我检查3商店,然后只有消息消失并启用提交按钮。 期望:当用户检查列出的任何人时,复选框消息应该消失,并且提交按钮应该启用。如果在复选框消息apper和提交按钮中没有选中任何内容,则应该被禁用。

function Test1Controller($scope) {

    var serverData = ["Store1", "Store2", "Store3"];
    $scope.items = [];

    for (var i = 0; i < serverData.length; i++) {
        var modal = {
            name: serverData[i],
            selected: false
        };
        $scope.items.push(modal);
    }

    $scope.check = function() {
        var checkedItems = [];
        for (var i = 0; i < $scope.items.length; i++) {
            if ($scope.items[i].selected) {
                checkedItems.push($scope.items[i].name);
            }
        }
        console.log(checkedItems);
    }

}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<div ng-app>
    <form name="projectForm">
        <div ng-controller="Test1Controller">
            <div ng-repeat="item in items">
                <input type="checkbox" ng-model="item.selected" required="" /> {{item.name}}
            </div>
            <div class="form-error" ng-messages="projectForm.booktime.$error">
                <div class="form-error" ng-message="required">* Mandatory</div>
            </div>
            <input type="button" name="submit" value="submit" ng-disabled="projectForm.$invalid" ng-click="check()" />
        </div>
</div>
</form>

0 个答案:

没有答案