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

how to validate checkbox(mandatory) using angularjs?

本文关键字：必选 复选框 验证 何使用 angularjs      更新时间：2023-09-26

该页列出了带有复选框的商店。我需要将必填项放入复选框，如果复选框中没有选择，我需要输入错误信息，此字段为必填项，没有选择，提交按钮应该禁用，如果用户选择了存储列表中的任何一个，强制信息应该消失，提交按钮应该启用。我已经做了，但当我检查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>

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

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);
}
});
相关文章：