Question

您好我正在开发angularjs中的一个Web应用程序。我有一个复选框，接下来我有一个下拉列表。如果我选中复选框，那么我想要下拉列表。我跟随之后，

我点击复选框 - 下拉列表需要进行验证。每当我取消勾选复选框时，我的所需验证将会发生。我想在选中复选框时对下拉列表进行必要的验证。

下面是我的复选框。

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

                }
            }

每当我取消选中该复选框时，我都不想要有必要的字段验证器。现在，我也在取消选中后获得必填字段验证器。我可以知道为什么会发生这种情况吗？我可以帮助解决上述问题吗？任何帮助，将不胜感激。谢谢。

Answer 1

您可以使用ng-required来实现此目的。将复选框的ng-model分配给选择的ng-required。

＆＃13;

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

＆＃13;

Answer 2

您可以使用ng-required =“Military”。

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

Angularjs ng-if具有必需的字段验证

2 个答案: