Wie mache ich ein ui-select Feld wie gewünscht?

Question

Ich möchte das folgende Feld (Einstellungen) in meinem Formular als Pflichtfeld in machen. Wie kann ich das tun?

<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

Ich denke, dass dies ein bekannter und langjähriger Fehler ist. Weitere Informationen finden Sie unter this GitHub issue.

Answer 2

können Sie benutzerdefinierte Anweisung verwenden.

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

Sie können ng-required = "true" schreiben.

<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

Sie kann dies durch die Verwendung Wert von ausgewählten

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

Answer 5

Keine der Antworten behandeln wirklich für mich gearbeitet. Ich löste es mit einer einfachen versteckten Eingabe mit dem gleichen ng-Modell wie die ui-select und validierte das im Formular.

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

Answer 6

Sie können zunächst erforderlich festlegen.

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

Fügen Sie einige scss (oder konvertieren in CSS) wie;

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