javascript 用于 ui-select 多个的 Angularjs 验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27224661/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs validation for ui-select multiple
提问by FrancescoMussi
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.
对于地址字段，我使用 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.
此错误已从版本 0.16.1 开始修复。正如@yishaiz 所指出的。
So this question and its relative solution regard ui-select versions < 0.16.1.
所以这个问题及其相关解决方案关于 ui-select 版本 < 0.16.1。
THE CODE:
代码：
HTML:
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
http://plnkr.co/edit/MYW7SM9c9anH6RTomfRG?p=preview
As you can see the ui-select is required but the form is parse as valid.
如您所见，ui-select 是必需的，但表单被解析为有效。
QUESTION(s):
问题）：
How can i make the ui-select multiple required?
我怎样才能使 ui-select 成为多个必需的？
采纳答案by camden_kid
This is a working Plunker.
这是一个工作的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.
它不使用 $valid 格式，我猜这是您理想中想要做的。
I tried using the recommended way as outlined here https://docs.angularjs.org/api/ng/directive/form
我尝试使用此处概述的推荐方式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.
我想知道问题是否归结为 multipleDemo.selectedPeople 始终有效，即使它是一个空数组。
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')
}
};
回答by nicolaspanel
Since angular#1.3, the angular way to do so is to create a custom (validation) directive.
从 angular#1.3 开始，这样做的 angular 方法是创建一个自定义（验证）指令。
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-messagesto properly display an error if validation fail. Example:
PS:?如果验证失败，您还可以使用ng-messages正确显示错误。例子：
<div ng-messages="emailForm.test.$error" >
<p ng-message="required">Custom message here</p>
</div>
回答by Mahantesh Kumbar
Try this: If length of the ng-model i.e. 'storage' is '0' then show the error message and also you can show error message by using form form_name.$submitted. This is simple way to handle required field for multiple select.
试试这个：如果 ng-model 的长度，即 'storage' 是 '0' 然后显示错误消息，你也可以使用 form_name.$submitted 显示错误消息。这是处理多选所需字段的简单方法。
<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>
回答by yishaiz
They have fixed the bug at ui-select version 0.16.1. See this working plunker. The one thing I've changed is the ui-select version in here
他们已在 ui-select 版本 0.16.1 中修复了该错误。看到这个工作plunker。我改变的一件事是这里的 ui-select 版本
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.16.1/select.js"></script>
And this isthe github closed bug issue.
而这是GitHub的关闭错误的问题。
