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).
EDIT:
This bug has been fixed from version 0.16.1. as pointed out by @yishaiz.
So this question and its relative solution regard ui-select versions < 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}} < {{$item.value}} ></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?
Since angular#1.3, the angular way to do so 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;
};
}
};
});
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 properly display an error if validation fail. Example:
<div ng-messages="emailForm.test.$error" >
<p ng-message="required">Custom message here</p>
</div>