Angularjs ng-if必要なフィールド検証

こんにちは私はangularjsで1つのWebアプリケーションを開発しています。私は1つのチェックボックスを持って、非常に次に私は1つのドロップダウンを持っています。チェックボックスをオンにすると、ドロップダウンが必要になります。私がフォローしているときは、Angularjs ng-if必要なフィールド検証

私はチェックボックスをクリックしてください。ドロップダウンが必要です。チェックボックスをオフにすると、必要な検証が行われます。私は、チェックボックスがチェックされているときだけドロップダウンのための必要な検証をしたい。

以下は自分のチェックボックスです。

<div class="inputblock"> 
          <label class="inputblock-label">{{ 'Military' | translate }}</label> 
          <label class="military">{{ 'Military' | translate }}</label> 
          <input type="checkbox" name="Military" placeholder="{{ 'Military' | translate }}" ng-model="Military" ng-change="statechanged(Military)"> 
         </div>

以下は私のドロップダウンリストです。

<div class="inputblock" ng-class="{ 'has-error' : ((form3.$submitted && form3.rank.$invalid) || (form3.rank.$invalid && form3.rank.$dirty))}"> 
          <label class="inputblock-label">{{ 'Rank' | translate }}</label> 
          <div ng-if="rankrequired==true"> 
           <span class="ang-error" style="color:#fff" ng-show="form3.rank.$invalid && form3.rank.$error.required && form3.rank.$dirty">*{{'Required' | translate}}</span> 
          </div> 
          <select id="rank" name="rank" ng-model="user.rank" ng-options="user.ID as user.Rank for user in rankList" required> 
           <option value="" label="rank">{{ 'Rank' | translate }}</option> 
          </select> 
         </div>

以下は私のJavaScriptコードです。

$scope.statechanged = function (Military) { 

       if (Military == true) 
       { 
        enablerankdropdown(); 
        $scope.rankrequired = function() { 
         return true; 
        }; 
       } 
       else 
       { 
        $scope.user.rank = $scope.rankList[0].value; 
        disablerankdropdown(); 
        $scope.rankrequired = function() { 
         return false; 
        }; 

       } 
      }

チェックボックスをオフにすると、必要なフィールドバリデーターが必要になります。今私もチェックを外した後、フィールドバリデーターを取得しています。なぜこれが起こっているのか分かりますか？私は上記の問題を解決するためにいくつかの助けを得ることができますか？どんな助けもありがとう。ありがとうございました。

出典

2017-07-19 Niranjan Godbole

'ng-required = Military'を使用できます。 – SaiUnique

これを実現するにはng-requiredを使用できます。チェックボックスのng-modelにng-requiredのselectを割り当てます。あなたはNG-必要= "軍隊" を使用することができます

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<body> 
 

 
<h2>Validation Example</h2> 
 

 
<form ng-app="myApp" ng-controller="validateCtrl" 
 
name="myForm" novalidate> 
 

 
<input type="checkbox" name="user" ng-model="user"> 
 

 
    <select name="service_id" class="Sitedropdown" style="width: 220px;"   
 
      ng-model="ServiceID" 
 
      ng-options="service.ServiceID as service.ServiceName for service in services" 
 
      required ng-required="user"> 
 
    <option value="">Select Service</option> 
 
    </select> 
 
    <span style="color:red" ng-show="myForm.service_id.$error.required">Select service</span> 
 
<input type="submit" 
 
ng-disabled=" 
 
myForm.service_id.$dirty && myForm.service_id.$invalid"> 
 
</form> 
 

 
<script> 
 
var app = angular.module('myApp', []); 
 
app.controller('validateCtrl', function($scope) { 
 
    $scope.services = [ 
 
    {ServiceID: 1, ServiceName: 'Service1'}, 
 
    {ServiceID: 2, ServiceName: 'Service2'}, 
 
    {ServiceID: 3, ServiceName: 'Service3'} 
 
    ]; 
 
}); 
 
</script> 
 

 
</body> 
 
</html>

出典

2017-07-19 06:53:41 Vivz

。

 <div class="inputblock" ng-class="{ 'has-error' : ((form3.$submitted && form3.rank.$invalid) || (form3.rank.$invalid && form3.rank.$dirty))}"> 
      <label class="inputblock-label">{{ 'Rank' | translate }}</label> 
      <div ng-if="rankrequired==true"> 
       <span class="ang-error" style="color:#fff" ng-show="form3.rank.$invalid && form3.rank.$error.required && form3.rank.$dirty">*{{'Required' | translate}}</span> 
      </div> 
      <select id="rank" name="rank" ng-model="user.rank" ng-options="user.ID as user.Rank for user in rankList" ng-required="Military"> 
       <option value="" label="rank">{{ 'Rank' | translate }}</option> 
      </select> 
     </div>

出典

2017-07-19 06:55:24 Dixit

Angularjs ng-if必要なフィールド検証

答えて

関連する問題