angular-formly issue with ui-select

Question

I am trying to use Angular-Formly together with angular ui-select using $http for results.

The options should refresh as the user types in. When I set the model from another text input, the ui-select updates correctly and show the corresponding results based on what was typed into the text box.

When I however type straight into the ui-select box, I am not getting values back and the templateOptions.options function does not fire and the $viewvalue is not updated.

I also don't seem to have access to the $select.search results which are updated but are not available in the expressionProperties.

Please see the following JSBin that reproduces the error :

http://jsbin.com/peducofaje/edit

I would appreciate help on this.

Answer 1

I have an early Christmas present for you. I've updated the ui-select example to have exactly what you want :-) A few notes on why yours didn't work:

• expressionProperties only run when the formState or model changes which is an optimization to reduce the number of watchers (because all expressionProperties share a single watcher). The problem with this is, your model didn't get updated until after an option was selected, so yeah.
• The template was using a group-By, but the templateOptions didn't have a groupBy. You could use a templateManipulator to dynamically add a group-by if one is present on the templateOptions, but my solution doesn't demonstrate this.
• You weren't handling the case where the address search was empty

Also, checkout the note at the top:

// NOTE: This next line is highly recommended. Otherwise Chrome's autocomplete will appear over your options!
formlyConfig.extras.removeChromeAutoComplete = true;

I hope this is helpful!