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