Question

我正在尝试在下拉框中设置bootstrap验证，只是因此他们需要有一个选定的值，如果没有，他们会被赋予红色边框以显示它们是必填字段..

我已经按照了一些教程，但是当下拉框没有选定值时，似乎无法显示任何红色边框。

任何人都可以看到缺少的东西吗？

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

选择框上的Bootstrap和AngularJS表单验证不起作用

1 个答案: