如何使用 angularjs 验证复选框（强制）？

Question

此页面列出了带有复选框的商店。我需要为复选框添加必填字段，如果在该复选框中未选择任何内容，我需要输入错误消息，此字段为必填项，并且未选择任何内容，如果用户选择了该商店列表中的任何一个，则应禁用提交按钮 必填消息应该消失并且提交按钮应该启用。我已经完成了，但是当我检查 3 商店时，只有消息消失并启用了提交按钮。 期望：当用户选中任何列出的复选框消息时，复选框消息应该消失并且提交按钮应该启用。如果在该复选框消息中没有选中任何内容，并且提交按钮应该被禁用。

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>

Answer 1

我在您的代码中调整了一些东西并让它工作。

HTML:

<div ng-app="myApp">
<form name="projectForm">
    <div ng-controller="Test1Controller">
        <div ng-repeat="item in items">
            <input type="checkbox" ng-model="item.selected" ng-change="itemsChecked()" required="" /> {{item.name}}
        </div>
        <div class="form-error" ng-messages="projectForm.booktime.$error">
            <div class="form-error" ng-message="required" ng-show="!itemChecked">* Mandatory</div>
        </div>
        <input type="button" name="submit" value="submit" ng-disabled="!itemChecked" ng-click="check()" />
    </div>
</form>

在 Javascript 中，您没有正确创建控制器。您应该首先创建一个模块，然后将控制器附加到模块，如下所示。

Javascript：

var app = angular.module("myApp", []);
app.controller("Test1Controller", function($scope) {
var serverData = ["Store1", "Store2", "Store3"];
$scope.items = [];

$scope.itemChecked = false;

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

$scope.itemsChecked = function() {
    $scope.itemChecked = false;
    for (var i = 0; i < $scope.items.length; i++)
    {
        if($scope.items[i].selected)
        {
            $scope.itemChecked = true;
        }
    }
}

$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);
}
});