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