Ngx-bootstrap: typeahead doesn't work with [formControl]

Created on 2 Feb 2017  路  4Comments  路  Source: valor-software/ngx-bootstrap

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'.
comp(typeahead) question

Most helpful comment

please try v1.3.3

All 4 comments

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.

app.module.ts:

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 { }

app.component.ts

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'];
}

app.component.html

<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!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

KimBum picture KimBum  路  3Comments

hugonne picture hugonne  路  3Comments

webdev48 picture webdev48  路  3Comments

RolfVeinoeSorensen picture RolfVeinoeSorensen  路  3Comments

srjkrl20011991 picture srjkrl20011991  路  3Comments