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タグを記述します。

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