mdAutocomplete Can't bind to 'formControl'

[kstraszewski]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

I wanted to try out the mdAutocomplete component.

What is the current behavior?

Error: Can't bind to 'formControl' since it isn't a known property of 'input'.

What are the steps to reproduce?

I was trying this example from "Examples tab":
https://material.angular.io/components/component/autocomplete
I just do simple copy and paste to my html and ts file.

Which versions of Angular, Material, OS, browsers are affected?

I'm using master tree from: https://github.com/angular/material2-builds.git

[diicar]

Have you added ReactiveForm in imports ?

[kstraszewski]

Ok i haven't added ReactiveForm to imports, but anyway i did it [(ngModel)] way.

[kara]

Yep, this looks like you were just missing the module import. Closing.

[param-bnb]

I am facing same problem.. what is the solution ?

[dahaupt]

@param-bnb Probably the import of ReactiveForm as mentioned before.

[ATakaSKY]

I am also faced with the same issue even after importing ReactiveFormsModule. Any suggestions?

[kara]

formControl is a directive from @angular/forms, so it's unlikely Material has anything to do with that error. Are you certain you have the ReactiveFormsModule loaded for that component?

[daddyschmack]

I too am having the same issue. Even after importing Reactive forms. But the error changed slightly, now it reads:
Error: No provider for FormControl!
--housing-address.comonent.ts

...
import { FormControl } from '@angular/forms';
...
export class HousingAddressFormComponent implements OnInit {
...
stateCtrl: FormControl;
  filteredStates: any;
...
constructor (
   ...
    ) {
  this.stateCtrl = new FormControl();
  this.filteredStates = this.stateCtrl.valueChanges
      .startWith(null)
      .map(name => this.filterStates(name));
}
...
  filterStates(val: string) {
    return val ? this.states.filter(s => new RegExp(`^${val}`, 'gi').test(s))
      : this.states;
  }

---housing-address.component.html

...
<md-input-container>
          <input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
        </md-input-container>

        <md-autocomplete #auto="mdAutocomplete">
          <md-option *ngFor="let state of filteredStates | async" [value]="state.value">
            {{ state.key }}
          </md-option>
        </md-autocomplete>
...

[kara]

@daddyschmack Can you reproduce in a plunker?

[daddyschmack]

Hi kara, I found the issue, I had double declarations of the FormControl...

[elbembo]

Step 3: Import the component modules

Import the NgModule for each component you want to use:

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
...
imports: [MdButtonModule, MdCheckboxModule],
...
})
export class PizzaPartyAppModule { }
Alternatively, you can create a separate NgModule that imports all of the Angular Material components that you will use in your application. You can then include this module wherever you'd like to use the components.

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
imports: [MdButtonModule, MdCheckboxModule],
exports: [MdButtonModule, MdCheckboxModule],
})
export class MyOwnCustomMaterialModule { }
Whichever approach you use, be sure to import the Angular Material modules after Angular's BrowserModule, as the import order matters for NgModules.

[MA-Maddin]

That you need ReactiveFormsModule is neither mentioned in https://angular.io/guide/forms nor in https://material.angular.io/components/autocomplete/overview or https://material.angular.io/guide/getting-started 😞

you are just facing

Error: Can't bind to 'formControl' since it isn't a known property of 'input'.

and asking google for help. :P

[iJungleboy]

I would like to add that I ran into this bug because of casing - I had used [FormControl] instead of [formControl] - this is why adding the ReactiveFormsModule didn't help :)

[Stephanemw]

Big thanks for ReactiveFormsModule hints - that helped a lot.

I second @MA-Maddin 's comment - this requirement should be highlighted. Everything only seems to mention FormsModule.

Eventually digging around the example code shows it in the autogenerated example-modules.ts:
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

Simple fix to the docs?