使用Angular Js进行下拉验证

Question

我正在使用AngularJs。我有一个下拉列表，我想通过点击提交按钮进行验证。下拉定义如下：

<select name="userTypeSelect" ng-model="selecteduserType" ng-options="user.UserTypeName for user in users" ng-change="updateImageUrl(selectedUserType)"> 
    <option value="">-- Select the User --</option> 
</select> 

按钮被定义为下面的提交：

<input type="submit" value="Submit" ng-click="add()" /> 

选项-- Select the User -在下拉列表中可用的第一个选项。我想检查用户是否没有选择任何东西或选择-- Select the User --，我想在点击提交按钮时显示验证。

如何检查下拉列表是否有正确的数据，当用户点击提交按钮时不为空。

Answer 1

试试这个工作演示，将工作按照您的期望。

var myApp = angular.module('myApp',[]); 
 

 
myApp.controller('MyCtrl',function($scope) { 
 
    $scope.users = [{ 
 
     id: 1, 
 
     name: 'user1' 
 
     }, { 
 
     id: 2, 
 
     name: 'user2' 
 
     }, { 
 
     id: 3, 
 
     name: 'user3' 
 
     }]; 
 
    $scope.add = function() { 
 
     console.log("submitting"); 
 
    }; 
 
    $scope.changeOption = function() { 
 
     $scope.submitted = false; 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
<form name="myForm" ng-submit="myForm.$valid && add()" novalidate> 
 
    <span ng-show="submitted == true && myForm.userTypeSelect.$error.required">User type select is required.</span> 
 
    <select name="userTypeSelect" ng-model="selecteduserType" ng-options="user.id as user.name for user in users" ng-change="changeOption()" required> 
 
     <option value="">Select Service</option> 
 
    </select> 
 
    <input type="submit" value="Submit" ng-click="submitted=true"/> 
 
</form> 
 
</div>

Answer 2

只是检查$scope.selecteduserType.length在if条件

$scope.add(){ 
    if($scope.selecteduserType.length){ 

    } 
    else{ 
     alert("pls select a value"); 
    } 
} 

OR

<form name="myForm" > 
    <select name="userTypeSelect" ng-model="selecteduserType" ng-options="user.UserTypeName for user in users" ng-change="updateImageUrl(selectedUserType)" required> 
     <option value="">Select Service</option> 
    </select> 
    <span ng-show="myForm.userTypeSelect.$error.required">Select service</span> 
    <input type="submit" ng-disable="myForm.$invalid" value="Submit" ng-click="add()" /> 
</form> 

Answer 3

只需添加required到<select>，然后将角度验证，除了没有值默认的选项被选中。这里有一个简单的例子来说明它在行动：

angular.module('app', []) 
 
    .controller('ctrl', function($scope) { 
 
     $scope.options = [{ 
 
     id: 1, 
 
     text: 'First Option' 
 
     }, { 
 
     id: 2, 
 
     text: 'Second Option' 
 
     }, { 
 
     id: 3, 
 
     text: 'Third Option' 
 
     }, { 
 
     id: 4, 
 
     text: 'Fourth Option' 
 
     }, { 
 
     id: 5, 
 
     text: 'Fifth Option' 
 
     }]; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    <form name="form" ng-submit="submit()" novalidate> 
 
    <div> 
 
     <select name="select" ng-model="selectedOption" ng-options="option as option.text for option in options" required> 
 
     <option value="">--Please select--</option> 
 
     </select> 
 
    </div> 
 
    <div ng-if="form.select.$invalid && form.$submitted">Please make a selection</div> 
 
    <div> 
 
     Selected option is valid: {{form.select.$valid}} 
 
    </div> 
 
    </form> 
 
</div>