Can t bind to formControl since it isn t a known property of input - Angular2 Material Autocomplete issue

Question

I am trying to use Angular Material Autocomplete component in my Angular 2 project  I added the following to my template    lt md-input-container gt      lt input mdInput placeholder  Category   mdAutocomplete   auto   formControl   stateCtrl  gt   lt  md-input-container gt    lt md-autocomplete  auto  mdAutocomplete  gt      lt md-option  ngFor  let state of filteredStates   async   value   state  gt           state        lt  md-option gt   lt  md-autocomplete gt    Following is my component   import  Component  OnInit  from   angular core   import  ActivatedRoute  Router  from   angular router   import  FormControl  from   angular forms     Component       templateUrl     edit item component html       styleUrls      edit item component scss      export class EditItemComponent implements OnInit       stateCtrl  FormControl      states        some data            constructor private route  ActivatedRoute  private router  Router            this stateCtrl   new FormControl            this filteredStates   this stateCtrl valueChanges startWith null  map name   gt  this filterStates name              ngOnInit    void             filterStates val  string            return val   this states filter  s    gt  new RegExp val   gi   test s     this states            I m getting the following error  It looks like the formControl directive is not being found      Can t bind to  formControl  since it isn t a known property of  input    What is the issue here

User · Answer

Start by adding a regular matInput to your template. Let's assume you're using the formControl directive from ReactiveFormsModule to track the value of the input.

Reactive forms provide a model-driven approach to handling form inputs whose values change over time. This guide shows you how to create and update a simple form control, progress to using multiple controls in a group, validate form values, and implement more advanced forms.

import { FormsModule, ReactiveFormsModule } from "@angular/forms"; //this to use ngModule

...

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    FormsModule,
    RouterModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MaterialModule],

User · Answer

From version 9 1 4 you only need to import ReactiveFormsModule  https   angular io guide reactive-forms

User · Answer

Another reason this can happen  The component you are using formControl in is not declared in a module that imports the ReactiveFormsModule  So check the module that declares the component that throws this error

User · Answer

Forget trying to decipher the example  ts - as others have said it is often incomplete   Instead just click on the  pop-out  icon circled here and you ll get a fully working StackBlitz example     You can quickly confirm the required modules     Comment out any instances of ReactiveFormsModule  and sure enough you ll get the error   Template parse errors  Can t bind to  formControl  since it isn t a known property of  input

User · Answer

While using formControl  you have to import ReactiveFormsModule to your imports array   Example   import  FormsModule  ReactiveFormsModule  from   angular forms     NgModule     imports        BrowserModule      FormsModule      ReactiveFormsModule      MaterialModule                export class AppModule

[angular] Can't bind to 'formControl' since it isn't a known property of 'input' - Angular2 Material Autocomplete issue

Examples related to angular

Examples related to typescript

Examples related to angular-material2

Examples related to angular-forms