I'm trying to figure out how to have a UI.Bootstrap Typeahead (http://angular-ui.github.io/bootstrap/) only set the model value if a selection is made from the dropdown, and clear the field if no selection was made.
If there's a different control out there that does this that would work too.
The Typeahead is selecting an object and if the user just types a few characters and then leaves the field, the model value is set to the string value of the field. I can obviously test for this case but modifying the scope model value doesn't refresh the form validity. So if I have a required field I also have to set the field's validity to false.
This all seems like a lot of work that someone must have already figured out. Any suggestions?
Edit
Another thought I had was, is it best practice to separate the Typeahead from the scope values that are being submitted back to the server?
I had a similar problem. The way I went around it is by using the blur event to validate.
<input type="text" ng-model="yourModel" ng-blur="validateSelection()
typeahead="item for item in list | filter:$viewValue"">