Angular typeahead validation after selection

Question

I am using angular (Version 1.3.9) and angular-ui/typeahead from http://angular-ui.github.io/bootstrap/ (Version 0.12.0).

In my web app the user should be forced to chose one of the options offered by the typeahead/autocomplete dropdown, so I set <input typeahead="..." typeahead-editable="false" .../>.

The problem is, that when the user clicks the mouse button and holds it pressed, the validation already kicks in, but the model doesn't get updated with the selected option yet. The selection is fired when the user releases the mouse button. So in the timeframe between clicking and releasing the mouse button the element's state gets invalid and therefore my corresponding error message is displayed.

This timeframe normally is less than a second (depending on how fast the user releases the mouse button). But still it is a very bad user experience if the error shows up in this little timeframe.

Can I change the order of execution of the corresponding directives? E.g. ng-select should be called before ng-blur?

Which options do you know to solve the problem?

You can test the behavior on http://co2offset.atmosfair.de/flight/offset Just type in an airport, select an option from the dropdown list and hold the mouse button pressed. Then you see the red error message which you shouldn't see.

I couldn't solve the problem yet. Who can help? Any ideas? Any questions? Is something unclear? — tschmid
– tschmid, Commented Feb 6, 2015 at 22:31
I still couldn't solve the problem. Any help is highly appreciated!!! — tschmid
– tschmid, Commented Mar 5, 2015 at 11:48
I had a similar issue where user has to select some options using the typeahead and error message should be displayed only when there is less than 2 options selected. I overcome this limitation by defining a directive to validate only the selected options and to use form.$error.<directive>[0].$touched && form.$error.<directive>[0].$invalid. — Lukasz Lenart
– Lukasz Lenart, Commented Nov 5, 2018 at 10:46

Jason McElfresh · Accepted Answer · 2015-04-24 22:05:37Z

2

I had the same problem just recently. I ended up disabling the submit button until a value was selected. So my form looks like this:

   <form name="searchForm" class="clearfix" ng-controller="searchFormController">
            <div class="form-group col-md-8 group-1">
                <label>Book</label>
                <input name="txtBookTitle"
                       type="text"
                       class="form-control"
                       ng-model="book"
                       placeholder="Enter book title"
                       typeahead-min-length="3"
                       typeahead-editable="false"
                       typeahead="book as book.Title for book in getBookTitles($viewValue)"
                       typeahead-input-formatter="book.Title"
                       typeahead-loading="loadingbooktitles"
                       required>
                <i ng-show="loadingbooktitles">
                    <img src="~/Content/images/ajax-loader.gif" />
                </i>
                <span ng-show="searchForm.txtBookTitle.$error.required">Booktitle is required</span>
            </div>
            <div class="form-group col-md-4 padding-top-25 text-right">
                <input type="submit" value="Submit" class="btn btn-primary" ng-click="formSubmit()" ng-disabled="searchForm.$invalid" />
            </div>
        </form>

ng-disabled="searchForm.$invalid" is the key. It seems to work well enough to keep users from getting ahead of the typeahead selection. Another bonus (depending on your perspective) is that the user can't submit the form until all the validation issues are fixed.

answered Apr 24, 2015 at 22:05

Jason McElfresh

1065 bronze badges

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

2 Comments

tschmid Over a year ago

Thanks for your help. Still my problem remains: although the user cannot submit the form until a value from the autocomplete dropdown is selected - while the user holds the mouse button pressed (e.g. for half a second) to select a value from the autocomplete, the error message is displayed until the user releases the mouse button again. This is irritating and not acceptable. How can I prevent this? Can the order of the events for validation and selection/repainting of the form be changed in a way to not show the error message for this little time frame?

Jason McElfresh Over a year ago

I suppose you could dig into the Angular and/or Bootstrap code and try to redefine when the validation or model update events occur, but at that point you're changing core files. Unfortunately, I won't be able to help with that.

Collectives™ on Stack Overflow

Angular typeahead validation after selection

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related