Angular UI Bootstrap - Clear model value when a Typeahead dropdown value is not selected?

Question

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?

Accepted Answer

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"">
```

Angular UI Bootstrap - Clear model value when a Typeahead dropdown value is not selected?

Solution

Problem