When using reactive forms, it is possible to bind typeahead's value to a formGroup's control with formControlName attribute, but not to a standalone control with [formControl] attribute. If you attempt to set [formControl] attribute you get an error:
Can't bind to 'typeahead' since it isn't a known property of 'input'.
it should be possible https://github.com/valor-software/ng2-bootstrap/blob/development/src/typeahead/typeahead.directive.ts#L23
are you sure you have imported TypeaheadModule.forRoot() like described in docs?
I'm sure. I just confirmed it by creating a fresh angular-cli project. Installed bootstrap and ng2-bootstrap.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { TypeaheadModule } from 'ng2-bootstrap/typeahead';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ReactiveFormsModule,
HttpModule,
TypeaheadModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
public myControl: FormControl = new FormControl();
public myForm: FormGroup = new FormGroup({ 'myControl': this.myControl });
public myOptions: string[] = ['a', 'b', 'c'];
}
<div>
<input [formControl]="myControl" [typeahead]="myOptions" typeaheadOptionsLimit="7" typeaheadMinLength="0" placeholder="Typeahead inside a form"
class="form-control">
</div>
<!--<form [formGroup]="myForm">
<input formControlName="myControl" [typeahead]="myOptions" typeaheadOptionsLimit="7" typeaheadMinLength="0" placeholder="Typeahead inside a form"
class="form-control">
</form>-->
This gives the error:
Can't bind to 'typeahead' since it isn't a known property of 'input'.
However, if you delete the typeahead input and uncomment the form, it works just fine.
Is that line of yours missing the [typeahead][formControl] entry?
please try v1.3.3
Fixed. Thank you very much!
Most helpful comment
please try v1.3.3