Проверка выпадающего списка с помощью 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, если условие

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

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

ИЛИ

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