Question

我在模型弹出窗口中有下拉列表，并希望在此处进行必要的字段验证。我的代码是关注..但代码没有完成验证..

   <div class="form-group form-group-sm">
       <label for="itClassification" class="control-label  text-xs
        col-xs-12 col-sm-4    col-md-4 col-lg-4">IT Classification : 
       </label>
       <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
           <select class="form-control" id="itClassification" 
               name="itClassification" ng-model="itClassification"
               ng-options="ic.itId as ic.itClassificationName for ic in 
               itClassifications" placeholder="select IT Classification" 
               required>
               <option value="" ng-selected="selected">Select IT 
               Classification</option> 
           </select> 
          <div class="help-block" ng-messages="addClientModal.itClassification.$error"
              ng-if="addClientModal.itClassification.$dirty && addClientModal.itClassification.$invalid">
             <p class="text-danger small" ng-message="required"><strong>ITClassification is required.</strong>
             </p>
         </div>
     </div>
 </div>

任何人都可以帮我解决这个问题吗？提前致谢

Answer 1

只需添加ngform代码

即可

<div class="form-group form-group-sm">
   <ng-form name="addClientModal">  
    // other tags
   </ng-form>
</div>

此处我将表单名称添加为addClientModal，请参阅Example

Answer 2

检查这是答案。您需要在表单名称＆gt;表单控件名称上使用验证。这是Plunkr http://plnkr.co/edit/bKEVv4kfnSJFd0w29Zdl?p=preview

＆＃13;

var app = angular.module('myApp', ['ngMessages']);

app.controller('TestController', function($scope) {

  //$scope.itClassification = null;
  $scope.optionsList = [
    {'label':'One','value':'1'},
    {'label':'Two','value':'2'},
    {'label':'Three','value':'3'},
    {'label':'Four','value':'4'},
    {'label':'Five','value':'5'},
    {'label':'Six','value':'6'},
    {'label':'Seven','value':'7'},
    {'label':'Eight','value':'8'},
    {'label':'Nine','value':'9'},
    {'label':'Ten','value':'10'},
    ]
  
  $scope.listItemChanged=function(schedule){
    alert($scope.itClassification)
  };

});

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script data-require="angularjs@1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
  <script data-require="ng-messages@*" data-semver="1.3.16" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-messages.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp">
  <div ng-controller="TestController">
    <form name="userForm" autocomplete="off">
      <div class="form-group form-group-sm">
        <label for="itClassification" class="control-label  text-xs col-xs-12 col-sm-4 col-md-4 col-lg-4">IT Classification :</label>
        <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
          <select class="form-control" id="itClassification" name="itClassification" ng-model="itClassification" ng-options="listItem.label as listItem.value for listItem in optionsList" placeholder="select IT Classification" required>
            <option value="" ng-selected="selected">Select IT Classification</option>
          </select>
          <div class="help-block" ng-messages="userForm.itClassification.$error">
            <p class="text-danger small" ng-message="required"><strong>ITClassification is required.</strong>
            </p>
          </div>
        </div>
      </div>
    </form>
  </div>
</body>

</html>

＆＃13;

下拉列表验证（必填）AngularJS

2 个答案: