dropdownlist validation (Required) AngularJS

Question

I have dropdown in model popup and want to do required field validation here. My code is following.. But the code is not done the validation..

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

Can anyone help me to solve this..? Thanks in advance

score 0 · Answer 1 · edited May 23 '17 at 12:00

0

Just add ngform tag

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

Here i added form name as addClientModal see Example

edited May 23 '17 at 12:00

Community

1
1

answered Aug 23 '16 at 07:49

ramamoorthy_villi

1,939
1
17
40

score 0 · Answer 2 · answered Aug 23 '16 at 08:07

Check this is the answer. You need to use validations on form name->form control name. Here is Plunkr http://plnkr.co/edit/bKEVv4kfnSJFd0w29Zdl?p=preview

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

});

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

dropdownlist validation (Required) AngularJS

2 Answers2