如何根據需要製作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%; 
    }