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

Jay · Accepted Answer · 2015-11-23 16:36:48Z

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, 2015 at 16:36

Jay

4524 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Benjamin David · Accepted Answer · 2016-01-28 20:58:39Z

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>

Collectives™ on Stack Overflow

form valid ui-select AngularJs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related