在选择框中使用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}">

并将此代码添加到您的控制器中：

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