CODEWITHSUNDEEP
angularjsangular-ui-typeahead
tschmid
tschmid

Reputation: 91

Angular typeahead validation after selection

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.

Upvotes: 4

Views: 5171

Answers (1)

Jason McElfresh
Jason McElfresh

Reputation: 106

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.

Upvotes: 2

Related Questions