Angularjs ng如果需要的字段驗證

您好我正在開發一個Web應用程序在angularjs中。我有一個複選框，接下來我有一個下拉菜單。如果我選中複選框，那麼我想讓下拉菜單爲必填項。 Wheneer我做以下，Angularjs ng如果需要的字段驗證

我點擊複選框，下拉需要驗證會發生。每當我取消選中複選框仍然會發生我需要的驗證。我只想在複選框被選中時纔對下拉菜單進行必要的驗證。

下面是我的複選框。

<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。

<!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

可以使用NG-所需= 「軍用」。

 <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如果需要的字段驗證

回答

相關問題