javascript - 在选择框上使用 Bootstrap 和 AngularJS 进行表单验证不起作用

Question

我正在尝试在下拉框中设置引导验证，这样它们就需要具有选定的值，如果没有，它们会被赋予红色边框以表明它们是必填字段。

我已经遵循了一些教程，但当下拉框没有选定值时，似乎无法出现任何红色边框。

有人能看到缺少什么吗？

<div ng-app="filterP" ng-controller="filter">
    <form name="myForm" data-toggle="validator" role="form">
        <div class="row">
            <div class="form-group col-md-3">
                <label class="control-label">* Type:</label>
                <select id="type" class="form-control" ng-options="x for x in types" name="selectedType" ng-model="selectedType" ng-change="getSizes()" required></select>
            </div>
        </div>
        <div class="row">
            <div class="form-group col-xs-4">
                <label class="control-label">* Model:</label>
                <select id="size" class="form-control" name="size" ng-model="selectedSize" ng-options="item as item.SizeDesc for item in sizes" required></select>
            </div>
            <div class="row">
                <div class="form-group col-md-12">
                    <div class="col-md-4">
                        <button type="submit" ng-click="generateReport()" class="btn btn-success btn-md ">Generate</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

Answer 1

创建一个 CSS 类，如下所示:

 <style>
    .checkValid .ng-invalid {
        border: 1px solid red;
    }
</style>

现在编写您的表单标签，如下所示:

<form id="myForm" name="myForm" data-toggle="validator" role="form" ng-
class="{'checkValid': checkValid}">

并将此代码添加到您的 Controller 中:

  $scope.generateReport = function () {
            var form = document.querySelector('#myForm');
            if (!form.checkValidity()) {
                $scope.checkValid = true;
            }
        }