johnnyfittizio johnnyfittizio - 6 months ago 222
AngularJS Question

Angularjs validation for ui-select multiple

THE SITUATION:

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




THE CODE:

HTML:

<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...">{{$item.name}} &lt; {{$item.value}} &gt;</ui-select-match>

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

<div ng-bind-html="person2.name | highlight: $select.search"></div>

<small>

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

</small>

</ui-select-choices>

</ui-select>

</div>

</div>

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

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

</div>

</form>


ANGULARJS:

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





PLUNKER:

http://plnkr.co/edit/MYW7SM9c9anH6RTomfRG?p=preview

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




QUESTION(s):

How can i make the ui-select multiple required?

Answer

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 https://docs.angularjs.org/api/ng/directive/form

<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) {
          alert('valid');
      }
      else {
        alert('not valid')
      }


    };

Plunker