Angle check for ui-select multiple

Question

SITUATION:

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

In the address field I use angular ui-select .

Everything works fine, except for checking in the address field (on the topic and checking the text works correctly).

EDIT:

This error has been fixed since version 0.16.1. as pointed out by @yishaiz.

Thus, this question and its relative solution consider versions ui-select <0.16.1.

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, ui-select is required, but the form is considered strong.

Question (s):

How can I make the required ui-select multiple?

Answer 1

This is a working Plunker .

The line I changed is this:

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

It does not use the $ valid form, which I think you would ideally want to do.

I tried using the recommended method described 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 that will not work.

Interestingly, no problem is that multipleDemo.selectedPeople always acts, even if it is an empty array.

Edit: to check for more than one field you can 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

Answer 2

Since angular # 1.3, angular's way of doing this is to create a custom (validation) directive.

Directive

 angular.module('myApp').directive('requireMultiple', function () { return { require: 'ngModel', link: function postLink(scope, element, attrs, ngModel) { ngModel.$validators.required = function (value) { return angular.isArray(value) && value.length > 0; }; } }; }); 

The code becomes:

 <ui-select name="test" multiple require-multiple ng-model="database_people.selectedPeople" ...> <ui-select-match placeholder="Select person...">... </ui-select-match> <ui-select-choices ...> ... </ui-select-choices> </ui-select> 

Adapted from this solution.

PS : you can also use ng-messages to correctly display an error if the check fails. Example:

 <div ng-messages="emailForm.test.$error" > <p ng-message="required">Custom message here</p> </div> 

Answer 3

Try the following: If the length of the ng model, that is, "storage", is "0", then display an error message, and you can also display an error message using the form_name form. This is an easy way to process the required field for multiple selection.

 <form name="myform" ng-submit="!storage.length>0 && functionname()"> <div class="form-group"> <ui-select multiple ng-model="storage" name="weekdays"> <ui-select-match> {{$item.name}} </ui-select-match> <ui-select-choices> {{weekday.name}} </ui-select-choices> </ui-select> <div ng-show="myform.$submitted"> <div ng-show="!storage.length>0" > <span style="color:red;">Storage is required</span> </div> </div> </div> <button type="submit">Click</button> </form> 

Answer 4

They fixed the bug in ui-select version 0.16.1. See This Working Plunker . The only thing I changed is the ui-select version here

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.16.1/select.js"></script> 

And this is a problem with a closed github error.