Question

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

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

Answer 1

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

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

Answer 2

您可以编写ng-required =＆＃34; true＆＃34;。

＆＃13;

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

＆＃13;

Answer 3

我认为这是一个已知且长期存在的错误。有关详细信息，请参阅this GitHub issue。

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

Answer 5

您可以先设置所需。

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

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

如何根据需要创建一个ui-select字段？

6 个答案: