如何根据需要制作一个ui-select字段？答案

【问题标题】：How to make a ui-select field as required?如何根据需要制作一个ui-select字段？
【发布时间】：2015-05-22 09:33:51
【问题描述】：

我想在我的表单中将以下字段（设置）作为必填字段。我该怎么做？

<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>

【问题讨论】：

添加required属性
我尝试添加<ui-select required>...</ui-select>。但它没有用
@fatCop，请求您将接受的答案更改为提供问题解决方案的答案。

标签： html angularjs

【解决方案1】：

没有一个答案真的对我有用。我使用一个简单的隐藏输入来解决它，该输入具有与 ui-select 相同的 ng-model 并在表单中验证它。

<input type="hidden" name="email_domain_pattern" ng-model="settings.emailDomainPatternList" required/>

【讨论】：

这是最好的解决方法，对我来说简单而有效！
举个例子会有所帮助
@SaeedJassani，我已将代码 sn-p 添加到答案中。希望对您有所帮助。
对我不起作用：Constraint validation: If an <input> element’s type attribute is in the Hidden state, it is barred from constraint validation.
更新记录：opacity: 0 确实工作，因此您可以定位不可见的输入，以便验证错误出现在正确的位置。

【解决方案2】：

你可以写 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>

【讨论】：

yes 对我也不起作用......可能是因为 ui-select 版本，我现在也在研究这个......
这个plnkr.co/edit/RN9Fry?p=preview 终于为我工作了，只要你确定你的元素在一个使用 ng-form="myForm" 的 div 中。这个我找了很久，试试@Ashutosh。
它只适用于单个选择字段而不是多个。

【解决方案3】：

我认为这是一个已知且长期存在的错误。请参阅this GitHub issue 了解更多信息。

【讨论】：

在ui-select中还没有修复吗？

【解决方案4】：

您可以使用自定义指令。

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;
            };
        }
    };
});

【讨论】：

【解决方案5】：

你可以先设置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>

添加一些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%;
    }

【讨论】：

【解决方案6】：

<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>

【讨论】：