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