Type-ahead-field bound to pre-populated field about angular-form-for HOT 10 CLOSED

Ah. I wonder if this is a problem with the type-ahead component or formFor not using it correctly. Thanks for pointing it out. I'll look into it!

from angular-form-for.

PS. I won't have a chance to look at it until this evening at the earliest. (Busy day at work.) If you have a chance to look before then, please feel free to tack a code snippet or PR onto this issue! :)

from angular-form-for.

I've been playing with typeahead.js in this plunk and have come to the conclusion that there's no (reasonable) way for typeahead.js to be able to initialize the field automatically. The reason for this is that it needs a lookup in the data-source that's going in the opposite direction from the one we provide it with.

For example, take the following array of US states:

var states = [
    {"name": "Alabama", "code": "AL"},
    {"name": "Alaska", "code": "AK"},
    {"name": "Arizona", "code": "AZ"},
    ...

The lookup function we provide matches the letters that have been typed against the state names and returns the matching state objects. Typeahead.js then uses the 'displayKey' field to extract names from the state objects that we give it and displays those.

For typeahead.js to be able to initialize the field, it would need a function that takes a state-code and returns a state object from that. Since we provide no such function, I believe it just can't do it. Instead I've added code to the plunk that sets the value manually, as follows:

var initialValue = "WA";
if (initialValue) {
  var initialStates = $.grep(states, function(state) { return state.code==initialValue; });
  if (initialStates.length>0)
    typeaheadField.val(initialStates[0].name);
}

I've been studying your code to try to work out how to add this initialization code to form-for but I don't understand Angular well enough to be able to do it at the moment. For example, I don't understand how your controls end up being bound to the controller scope. What is it that's actually bound? Are any actual HTML elements bound, or are the HTML elements display-only and the binding happens under the covers. I'm sorry I can't be more useful at this point.

from angular-form-for.

Ah, yeah. The problem is that I'm using $watch inside of type ahead's link function to update the bindable model value - but I'm not passing data the other way (from $scope.model.bindable) to initialize the component.

This is hopefully a small fix. I'll poke around with it this evening. Sorry it's taken me so long to respond.

from angular-form-for.

Please don't apologize - I'm just grateful for all the work you've already done.
It may be worth keeping in mind that the options and the bound value could change at any time and in any order. In my case, the options come from the server via a callback and usually won't be available when the directive is first linked. This means that some 'initialization' code will need to go into the updateFilteredOptions function as well. My gut feeling is that this two-way relationship could result in cyclic updates, though Angular may have this problem covered since no changes should take place after the first cycle.

from angular-form-for.

Thanks for being so understanding.

Fortunately, Angular's method of dirty-checking prevents this type of infinite loop (unless you slip up, and set a modified value).

from angular-form-for.

Check out aa49a33. This resolves the issue for me, using my local test harness.

from angular-form-for.

I'm glad you pointed this out, because the same issue existed for selectField. (Also fixed via 8595028).

from angular-form-for.

New release is out ~ 1.1.8

Please give it a shot and let me know if it resolves your issue!

from angular-form-for.

Brilliant! That works!

from angular-form-for.