如何根据需要制作ui选择字段?
我想将我的表单中的以下字段(设置)作为必填字段输入。我该怎么做?如何根据需要制作ui选择字段?
<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>
您可以使用自定义指令。
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;
};
}
};
});
不幸的是,不起作用。 – Jakobovski 2017-07-24 21:05:39
你可以写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>
您可以通过使用选择
<button ng-disabled="($ctrl.rewardForm.$invalid && $ctrl.valueForValidation) || $ctrl.pend">Submit</button>
无答案的真正工作对我来说价值处理这个问题。我用一个简单的隐藏输入解决了这个问题,它使用和ui-select相同的ng模型,并在表单中验证它。
<input type="hidden" name="email_domain_pattern" ng-model="settings.emailDomainPatternList" required/>
这是最好的解决方法,对我来说简单而有效! – DennyHiu 2017-10-25 07:26:08
一个例子会帮助 – 2017-12-29 06:33:47
@SaeedJassani,我已经添加了代码片段的答案。希望能帮助到你。 – 2017-12-29 12:50:42
您可以先设置要求。
<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>
添加一些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%;
}
添加'required'属性 – devqon 2015-03-19 10:11:21
我试着添加' ... ... '。但它不起作用 –
fatCop
2015-03-19 10:13:07
@fatCop,请求您将接受的答案更改为提供问题解决方案的答案。 – 2017-12-29 12:53:55