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如果需要的字段验证

回答

相关问题