form valid ui-select AngularJs

Question

How can I validate a required "ui-select" field? The text input field 'prénom' in this image works.

It doesn't work with the following code :

              <div class="col-lg-4 col-md-4 col-sm-10 col-xs-12">
                                            <ui-select ng-model="role.selected" theme="selectize" name="role" required>
                                                <ui-select-match placeholder="Selectionnez un rôle">{{$select.selected.titre_role}}</ui-select-match>
                                                <ui-select-choices repeat="role as role in listeRole">
                                                    <span ng-bind-html="role.titre_role"></span>
                                                </ui-select-choices>
                                            </ui-select>
                                            <div class="alert alert-danger" style="margin-top:-20px;" ng-show="(f1.role.$dirty|| Submitted)  && f1.role.$error.required"><span>Veuillez remplir ce champ</span></div>
                                        </div>

Thank you

score 1 · Accepted Answer · answered Nov 23 '15 at 16:36

1

Apparently an issue has been opened on github:

https://github.com/angular-ui/ui-select/issues/1226

You could write a custom validator in the meantime.

answered Nov 23 '15 at 16:36

Jay

452
4
15

score 1 · Answer 2 · answered Jan 28 '16 at 20:58

I'd just bind the value that you're associating with ui-select to a hidden input as well.

<div class="col-lg-4 col-md-4 col-sm-10 col-xs-12">
    <ui-select ng-model="role.selected" theme="selectize">
        <ui-select-match placeholder="Selectionnez un rôle">{{$select.selected.titre_role}}</ui-select-match>
        <ui-select-choices repeat="role as role in listeRole">
            <span ng-bind-html="role.titre_role"></span>
        </ui-select-choices>
    </ui-select>
    <!-- 
      this will bind to the same value as the ui-select
      and aslo be available to f1 properties 
    -->
    <input type="hidden" name="role" ng-model="role.selected" required />
    
    <div
         class="alert alert-danger"
         style="margin-top:-20px;"
         ng-show="(f1.role.$dirty|| Submitted)  && f1.role.$error.required"
    >
       <span>Veuillez remplir ce champ</span>
    </div>
</div>

form valid ui-select AngularJs

2 Answers2