필요에 따라 ui-select 필드를 만드는 방법

필요에 따라 ui-select 필드를 만드는 방법

아래의 필드(설정)를 필수로 폼에 넣고 싶습니다.어떻게 해야 하죠?

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

어떤 대답도 나에게는 통하지 않았다.ui-select와 동일한 ng-model의 단순한 숨겨진 입력을 사용하여 그것을 폼에서 검증했습니다.

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

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>

이것은 이미 알려진 오래된 버그라고 생각합니다.자세한 내용은 이 GitHub 문제를 참조하십시오.

커스텀 디렉티브를 사용할 수 있습니다.

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

먼저 필수 항목을 설정할 수 있습니다.

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

다음과 같은 scs를 추가합니다(또는 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%;
    }

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

언급URL : https://stackoverflow.com/questions/29141730/how-to-make-a-ui-select-field-as-required