如何根据需要制作ui选择字段？

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

我认为这是一个已知和长期存在的错误。有关更多信息，请参见this GitHub issue。

Answer 2

您可以使用自定义指令。

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 3

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

Answer 4

您可以通过使用选择

<button ng-disabled="($ctrl.rewardForm.$invalid && $ctrl.valueForValidation) || $ctrl.pend">Submit</button> 

Answer 5

无答案的真正工作对我来说价值处理这个问题。我用一个简单的隐藏输入解决了这个问题，它使用和ui-select相同的ng模型，并在表单中验证它。

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

Answer 6

您可以先设置要求。

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