I have an <input> that uses Bootstrap typeahead with Angular UI directive. The display and selection of values in the drop down works fine.
However when I type a value into the input that is not one of the drop down options then this value does not get bound to the model property. Yet what I type remains in the input as if it were valid input.
In the example below, when I type text into the input that is not an option in the autocomplete.referrers array then this text does not get bound to registration.referrer.
Have I configured the input correctly?
<input type="text"
name="referrer"
ng-model="registration.referrer"
autocomplete="off"
typeahead="referrer for referrer in autocomplete.referrers | filter:$viewValue"
/>
Perhaps the restriction on random text input is by design?
Many thanks if you can answer this.
@reggoodwin this is by-design in the current version of the typeahead directive: https://github.com/angular-ui/bootstrap/blob/929a46faa3a3eea3dec7ae8c1387f332eee9a9bc/src/typeahead/typeahead.js#L110
The rationale behind this behavior is that values from autocomplete should act as reference values. But I was pondering this behavior a bit, it could be made configurable. Feel free to open an issue in https://github.com/angular-ui/bootstrap to discuss more.
Adding this directive as an attribute worked for me:
<input typeahead-editable="false" >