required tag

[brackmayhall]

Is it possible to set a required tag for this control? I am not getting a prompt when the required tag is set and it is embedded in a form element. Thanks.

[viveleroi]

Are you using ng-required? I was just looking into this myself and noticed that it does work.

[brackmayhall]

I have tried both with no success. Any idea what I could be doing wrong here?

                                <ui-select id="vendorNameSelect" ng-model="item.vendorId" theme="select2" ng-disabled="!new"  title="Select Vendor" ng-required="true">
                                    <ui-select-match placeholder="Select Vendor">{{$select.selected.name || $select.selected}}</ui-select-match>
                                    <ui-select-choices repeat="vendor.vendorId as vendor in vendors | propsFilter: {name: $select.search}">
                                        <div ng-bind-html="vendor.name | highlight: $select.search"></div>
                                        <small>
                                            phone: {{vendor.phone}}
                                        </small>
                                    </ui-select-choices>
                                </ui-select>

[viveleroi]

Nothing jumps out at me, though I have no what might conflict with the validation. Maybe the disabled state?

Here's my code for reference. When the drop down is an empty value, the field container is properly marked as ng-invalid, and ng-valid when I choose something.

<ui-select ng-model="model.vessel" append-to-body="true" search-enabled="false" ng-required="true">
    <ui-select-match>{{$select.selected}}</ui-select-match>
    <ui-select-choices repeat="vessel in vessels">
        <span ng-bind-html="vessel"></span>
    </ui-select-choices>
</ui-select>

[brackmayhall]

I'm still having issues. Going to try to break it down using the examples.

[brackmayhall]

I stripped down the demo.html example and gave this a shot. The input prompts holds true for the required tag but the select does not.

<form name="testForm">
  <input name="firstInput" ng-model="data.first" required>

  <p>Selected: {{person.selected}}</p>
  <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;" title="Choose a person" required>
    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
      <div ng-bind-html="person.name | highlight: $select.search"></div>
      <small>
        email: {{person.email}}
        age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
      </small>
    </ui-select-choices>
  </ui-select>

  <button ng-click="submit()">Submit</button>

</form>

I am at a loss on this. Any ideas what could be going on? Am I not setting the form and submit up properly or is this a bug?

[brackmayhall]

this works on the button for submission but what I do not get is the UI prompt stating not all fields have been filled out.

ng-disabled="myFormNg.$invalid"

[gottfrois]

+1 on this. Would be great to be able to do

<div ui-select ng-model='model.foo' required></div>

[viveleroi]

Sounds like use of required needs to be addressed. I used ng-require and inspecting the classes on the select element, I see the correct classes.

[Jaco-Pretorius]

+1 on this

[wzomer]

+1

[imaa]

+1

[jcolemorrison]

Just a note, the required validation won't work with basic HTML5 validation. You need to add ng-submit="submitFunction(nameOfYourForm.$valid)" to your form and check from there. However, required is indeed broken for Multiple Select.

[jcolemorrison]

I just submitted a PR to fix the issue with multiple select. It will allow you to just put required directly on the multiple tag and receive the expected functionality.

However, as with all of the UI-Select elements you'll need to check for the form.$error object when submitting your form. HTML5 validation will not catch those.

PR Link: #1025

[tazmaniax]

It looks like the required attribute is not being copied across from original hidden input to the generated one...

<div class="controls">
    <div class="select2-container ng-pristine ng-untouched ng-invalid ng-invalid-required" id="s2id_newCommunity_country_id" style="min-width: 220px; margin-bottom: 0px;">
        <a href="javascript:void(0)" class="select2-choice select2-default" tabindex="-1"> <span class="select2-chosen" id="select2-chosen-1">Select country...</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow" role="presentation"><b role="presentation"></b></span>
        </a>
        <label for="s2id_autogen1" class="select2-offscreen">Country</label>
        <input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-1" id="s2id_autogen1">
        <div class="select2-drop select2-display-none select2-with-searchbox">
            <div class="select2-search">
                <label for="s2id_autogen1_search" class="select2-offscreen">Country</label>
                <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-owns="select2-results-1" id="s2id_autogen1_search" placeholder=""> </div>
            <ul class="select2-results" role="listbox" id="select2-results-1"> </ul>
        </div>
    </div>
    <input type="hidden" id="newCommunity_country_id" name="newCommunity.country.id" value="" ui-select2="countrySelect2Options" ng-model="results.country" data-placeholder="Select country..." ng-required="true" style="min-width: 220px; margin-bottom: 0px; display: none;" required="required" class="ng-pristine ng-untouched ng-invalid ng-invalid-required" tabindex="-1" title="Country">
</div>

If I modify the generated input field and add the required attribute then the html5 validation fires as expected and displays the standard error message:

I don't think this is necessarily a select2 issue because they seem to have it working except for the positioning issue mentioned in issue select2/select2#128

[f1ght4fun]

@tazmaniax did u manage to find how to fix required validation for ui-select to show this html5 validation popup ?

[tazmaniax]

@f1ght4fun unfortunately I haven't had any more time to look into it and I'm just living with the issue at the moment which is not great.

[jcolemorrison]

I did throw in a PR for making it worked with multiple. The only catch is that it only works with angular validation (via the Form) and wont get caught by basic validation. But really, serious UX apps need better validation anyway since the basic required html5 validation fails on some browsers and < iOS8

[kmccullough]

The required/ngRequired directive doesn't actually check if the value is empty; it calls $isEmpty, which is meant to be overridden by directive (in this case uiSelect). Rather than try to reinvent the required directive, just override this method. Here's what I settled on:

    module.directive('uiSelect', function() {
        return {
            restrict: 'EA',
            require: '?ngModel',
            link: function (scope, element, attrs, ctrl) {
                if (ctrl && angular.isDefined(attrs.multiple)) {
                    ctrl.$isEmpty = function(value) {
                        return !value || value.length === 0;
                    };
                }
            }
        };
    });

[soichih]

+1 for

<div ui-select ng-model='model.foo' required></div>

[andidev]

Any progress on this?

A workaround would be to create another input that is not displayed

<input type="text" style="display: none" name="vendor" ng-model="item.vendorId" required/>

[niralmunjariya]

+1 for
#850 (comment)

[ganqqwerty]

I'm trying to use ng-messages with ui-select. I've tried to use both required and ng-required with multiple option turned on and bootstap theme. When I pick a value and then delete them, I still see ng-valid.

@kmccullough your solution is working and it's much better than the hack that @andidev proposed, why not adding it to the code of ui-select?

[jfairley]

@kmccullough 👍

[nachaos-zz]

@kmccullough proposal worked. Is this something we will see in the upcoming releases?