Html 如何根据需要制作ui-select字段？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29141730/
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
How to make a ui-select field as required?
提问by fatCop
I want to make the following field (settings) in my form as a required field in. How can I do it?
我想将表单中的以下字段（设置）设为必填字段。我该怎么做？
<div class="form-group">
<label class="col-xs-5 control-label"> Settings*</label>
<div class="col-xs-7">
<ui-select multiple tagging="adPreferredEmailDomainPatternTransform" id="emailDomainPatternListInput"
tagging-tokens="SPACE|," theme="bootstrap"
ng-disabled="settings.enableAuthentication == 'false'"
ng-model="settings.emailDomainPatternList">
<ui-select-match>{{$item.displayFormat}}</ui-select-match>
<ui-select-choices repeat="item in emailDomainPatterns">
{{item.displayFormat}}
</ui-select-choices>
</ui-select>
</div>
</div>
采纳答案by Kostas Rousis
I think that this is a known and long-standing bug. See this GitHub issuefor more information.
我认为这是一个已知且长期存在的错误。有关更多信息，请参阅此 GitHub 问题。
回答by Nirav Gandhi
None of the answers really worked for me. I solved it using a simple hidden input with the same ng-model as the ui-select and validating that in the form.
没有一个答案对我有用。我使用与 ui-select 相同的 ng-model 的简单隐藏输入解决了它，并在表单中验证了它。
<input type="hidden" name="email_domain_pattern" ng-model="settings.emailDomainPatternList" required/>
回答by bar?? ??rac?
You can write ng-required="true".
你可以写 ng-required="true"。
<div class="form-group">
<label class="col-xs-5 control-label"> Settings*</label>
<div class="col-xs-7">
<ui-select multiple tagging="adPreferredEmailDomainPatternTransform"
id="emailDomainPatternListInput"
tagging-tokens="SPACE|,"
theme="bootstrap"
ng-disabled="settings.enableAuthentication == 'false'"
ng-model="settings.emailDomainPatternList"
ng-required="true">
<ui-select-match>{{$item.displayFormat}}</ui-select-match>
<ui-select-choices repeat="item in emailDomainPatterns">
{{item.displayFormat}}
</ui-select-choices>
</ui-select>
</div>
</div>回答by ddagsan
you can use custom directive.
您可以使用自定义指令。
angular.module("app").directive('uiSelectRequired', function () {
return {
require: 'ngModel',
link: function (scope, element, attr, ctrl) {
ctrl.$validators.uiSelectRequired = function (modelValue, viewValue) {
if (attr.uiSelectRequired) {
var isRequired = scope.$eval(attr.uiSelectRequired)
if (isRequired == false)
return true;
}
var determineVal;
if (angular.isArray(modelValue)) {
determineVal = modelValue;
} else if (angular.isArray(viewValue)) {
determineVal = viewValue;
} else {
return false;
}
return determineVal.length > 0;
};
}
};
});
回答by Mahib
You can set required first.
可以先设置为required。
<form name="form">
<div ng-class="{ 'has-error': form.premise.$touched && form.premise.$invalid }">
<div class="col-md-3">
<div class="label-color">PREMISE <span class="red"><strong>*</strong></span></div>
</div>
<div class="col-md-9">
<ui-select name="premise"
id="premise"
ng-required="true"
ng-model="selectedPremise" theme="select2"
ng-disabled="plantregistration.disabled"
class="max-width" title="Choose a premise">
<ui-select-match
placeholder="Select or search a premise...">
{{$select.selected.name}}
</ui-select-match>
<ui-select-choices
repeat="person in plantregistration.list12 | filter: {name: $select.search}">
<div ng-bind-html="person.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
<span ng-show="form.premise.$touched && form.premise.$invalid"
class="label-color validation-message">
Premise is required</span>
</div>
</div>
</form>
Add some scss (or convert to css) like;
添加一些 scss（或转换为 css），例如；
.label-color {
color: gray;
}
.has-error {
.label-color {
color: red;
}
.select2-choice.ui-select-match.select2-default {
border-color: red;
}
}
.validation-message {
font-size: 0.875em;
}
.max-width {
width: 100%;
min-width: 100%;
}
回答by Suresh Kaushik
<div class="form-group">
<label class="col-xs-5 control-label"> Settings</label><span class="text-danger"><strong>*</strong></span>
<div class="col-xs-7">
<ui-select ng-required="true" multiple tagging="adPreferredEmailDomainPatternTransform" id="emailDomainPatternListInput"
tagging-tokens="SPACE|," theme="bootstrap"
ng-disabled="settings.enableAuthentication == 'false'"
ng-model="settings.emailDomainPatternList">
<ui-select-match>{{$item.displayFormat}}</ui-select-match>
<ui-select-choices repeat="item in emailDomainPatterns">
{{item.displayFormat}}
</ui-select-choices>
</ui-select>
</div>
