chore(typeahead): inside a form causes issues

[ronzeidman]

Hi,
I've encountered several issues trying to put Typeahead inside a form.

1. ngControl doesn't work (throws a "No provider for NgModel! (Typeahead -> NgModel)" exception)
2. Typeahead inside a form causes submit on enter, form submission should be prevented on enter when the choices are presented (since you just want to select the choice).
3. "autocomplete" should be "off" by default.
4. Also choices should automatically close on blur (This also happens on a non-form typeahead)
5. I think "TAB" should also choose the typeahead choice.

[valorkin]

1. ngControl doesn't work (throws a "No provider for NgModel! (Typeahead -> NgModel)" exception)

it means you should have ngModel on same element with typeahead directive

2. Typeahead inside a form causes submit on enter, form submission should be prevented on enter
   when the choices are presented (since you just want to select the choice).

can you create a plunker for it? it sounds critical

3. "autocomplete" should be "off" by default.

will have to check it

4. Also choices should automatically close on blur (This also happens on a non-form typeahead)
5. I think "TAB" should also choose the typeahead choice.

may be on lostfocus, but yes

[ronzeidman]

1. it happens also when ngModel is present.

is there a CDN or a base plunkr for ng2-bootstrap?

[ronzeidman]

I've uploaded a test in my github: https://github.com/ronzeidman/open-ng2-tests
It shows the form submission.
In addition if you just add 'ngControl="something"' (not remove anything) to the input an exception will be thrown.

I'm always amazed by your fast responses!

[valorkin]

is there a CDN or a base plunkr for ng2-bootstrap?

If I will be lucky, I will land system.js bundling with TS 1.8 on this weekends
Thanks for repo, I will take a look :)

In addition if you just add 'ngControl="something"' (not remove anything) to the input an exception will be thrown.

hm

I'm always amazed by your fast responses!

do my best :)

[nrehm]

Anyone found a solution to this problem?
Would like to use it inside a form and cant really track down why its breaking when you have ngModel and ngControl on the same Input.

[nrehm]

Digged into it a little bit and copy / changed something from the ngModel directive and added it to typeahead.directive.ts

const formControlBinding = 
         CONST_EXPR(new Provider(NgModel, {useExisting: forwardRef(() => NgControl)}));

and inside the directive decorator

bindings: [formControlBinding]

It seem to works now in both cases but my angular2 foo is to weak after just 1 week.
Im not sure what is happening and why its really working now but it feels like to be on the right side of the fence

[slintes]

I came across the same issue (1) today, thanks a lot for the fix / workaround(?) @nrehm, works for me too! You should create PR for it :)

First I thought I came across this issue: angular/angular#6374, but I'm not sure if that is related, my knowledge of the Angular2 internals is also very limited.

@ronzeidman: you might be happy to hear that your point 4 was merged yesterday :) #351

[ronzeidman]

@slintes :) happy to hear.
Looking forward to try and integrate this again.

[Toktik]

Workaround:

Adding this to parent component (which includes typeahead) fixes the No provider for NgModel! (Typeahead -> NgModel)" exception) exception

providers: [NgModel]

[valorkin]

@Toktik this is awesome idea! And the simplest one!

[slintes]

Mh, the workaround of @Toktik didn't work for me. I didn't get the "no provider..." error anymore, but another error as soon as I start typing (model in this.cd.model in typeahead.directive.ts.onChange() was undefined)... no clue why, but with the fix of @nrehm it works.
Besides that for me it does feel wrong that I have to provide NgModel in the parent component for getting this to work.
I created a PR with the solution of @nrehm: #396

[Dinistro]

This should be fixed in the newest version

[slintes]

just updated to RC 5 and new FormsModule, no problems anymore, thanks!

[dietergeerts]

Using v1.3.2, but the autocomplete is still not off. Can this be fixed?