johnnyfittizio johnnyfittizio - 1 year ago 368
AngularJS Question

Angularjs validation for ui-select multiple


I have an angular app that send emails.
There is a form with three fields:
Address - Subject - Text.

For the address field I am using angular ui-select.

Everything is working fine, except the validation on the address field (on subject and text validation is working properly).



<form name="emailForm" ng-submit="submitForm(emailForm.$valid)">

<div class="row form-group">

<label class="col-sm-2 control-label">To: </label>

<div class="col-sm-10">

<ui-select multiple ng-model="database_people.selectedPeople" theme="select2" ng-disabled="disabled" style="width:100%">

<ui-select-match placeholder="Select person...">{{$}} &lt; {{$item.value}} &gt;</ui-select-match>

<ui-select-choices repeat="person2 in list_people | filter: {name: $, value: $, db_data_type_id: 5}">

<div ng-bind-html=" | highlight: $"></div>


email: <span ng-bind-html="''+person2.value | highlight: $"></span>






<div class="col-sm-8">

<button type="submit" class="btn btn-primary">Send</button>




$scope.submitForm = function(isValid)
if (isValid) {
else {
alert('not valid')


As you can see the ui-select is required but the form is parse as valid.


How can i make the ui-select multiple required?

Answer Source

This is a working Plunker.

The line I have changed is this:

<form name="emailForm" ng-submit="submitForm(multipleDemo.selectedPeople.length > 0)"> 

It doesn't use the form $valid which is what I guess you would ideally like to do.

I tried using the recommended way as outlined here

<form name="emailForm" ng-submit="submitForm(emailForm.test.$valid)"> 


<ui-select multiple required ng-model="multipleDemo.selectedPeople" theme="select2" ng-disabled="disabled" style="width: 800px;" name=test>

but it doesn't work.

I wonder if the problem is down to the fact that multipleDemo.selectedPeople is always valid even when it is an empty array.

Edit: To validate more than one field you could do this

<form name="emailForm" ng-submit="submitForm()"> 

In the controller

  $scope.submitForm = function() 
      var valid = true;
      if ($scope.multipleDemo.selectedPeople.length === 0) {
        valid = false;
      // Followed by tests on other fields

      if (valid) {
      else {
        alert('not valid')