28

I want to make the following field (settings) in my form as a required field in. How can I do it?

<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>
3
  • Add required attribute
    – devqon
    Commented Mar 19, 2015 at 10:11
  • 1
    I tried adding <ui-select required>...</ui-select>. but it didn't work
    – fatCop
    Commented Mar 19, 2015 at 10:13
  • @fatCop, request you the change the accepted answer to the one that provides a solution to the problem. Commented Dec 29, 2017 at 12:53

6 Answers 6

15

None of the answers really worked for me. I solved it using a simple hidden input with the same ng-model as the ui-select and validating that in the form.

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

You can write 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>

3
  • yes doesn't work for me either...it might be because of the ui-select version, I am looking into this now too..
    – 123123d
    Commented Nov 29, 2016 at 10:30
  • 1
    this plnkr.co/edit/RN9Fry?p=preview worked for me at last, as long as you are sure that your elements are in a div that uses ng-form="myForm". I have searched for this for a long time, try it @Ashutosh.
    – 123123d
    Commented Nov 29, 2016 at 10:43
  • it only works for single select fields not for multiple.
    – bonbon
    Commented Jan 16, 2017 at 16:16
6

I think that this is a known and long-standing bug. See this GitHub issue for more information.

1
  • 2
    is it still not fixed in ui-select?
    – Ashutosh
    Commented Nov 29, 2016 at 10:21
3

you can use custom directive.

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

You can set required first.

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

Add some scss (or convert to css) like;

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.