553

I am trying to use Angular Material Autocomplete component in my Angular 2 project. I added the following to my template.

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

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

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 => this.filterStates(name));
    }
    ngOnInit(): void {
    }
    filterStates(val: string) {
        return val ? this.states.filter((s) => 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?

3
  • 13
    one comment to Pengyy's answer: While using formControl, you have to import ReactiveFormsModule to your module, not rootModule. Just in case you use FormControl in your feature modules.
    – King John
    Jul 15, 2017 at 14:06
  • 1
    I have similar case and have the import for ReactiveFormsModule in my feature. The only difference is that I would like to bind to 'formControlName' instead of 'formControl'. The message has the same structure Sep 14, 2017 at 14:51
  • 1
    The answers here are correct; but if anyone is still stuck (like I was) and the error says formcontrol (lowercase) rather than formControl — if you're running templates through webpack html-loader, this will help: stackoverflow.com/a/40626329/287568
    – Ben Boyle
    Jan 15, 2019 at 2:43

11 Answers 11

1112

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 {}
8
  • 246
    Really, why isn't this in the doc at material.angular.io/components/autocomplete/overview so much time wasted for this. Magical unknown dependencies everywhere with angular. Sep 26, 2017 at 22:03
  • 9
    @Vadorequest: Those docs are for Material. If they start adding docs for every feature of Angular that they use, there could end up being lots of duplication between the Angular docs and the Material docs that will eventually slip out of sync. But I spent a good amount of time scratching my head at this too. You could always submit an issue to the material github repo: github.com/angular/material2/issues
    – Eric Ihli
    Sep 28, 2017 at 15:29
  • 37
    That's no excuse IMHO. They could do something about, maybe a "general troubleshootings" that links to some kind of tips. If their library depends on other native angular dependencies, it's also their task to highlight those deps. Especially in this case, their framework is on "material.angular.io" after all. Sep 30, 2017 at 7:59
  • 4
    Or just a standard tooling that automatically pulls in these types of modules based on what you're using. Sounds like a job for webpack?
    – ferr
    Oct 29, 2017 at 22:37
  • 1
    The need to use ReactiveFormsModule is clear if you look within Stackblitz in the autocomplete docs. More generally, any component will have more details in its Stackblitz demo than the in-page code... Feb 28, 2019 at 9:37
67

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.

enter image description here

You can quickly confirm the required modules:

enter image description here

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'. 
2
  • 1
    Is there a reason the documentation is missing this and we need to hunt through the StackBlitz to see what they omitted??
    – SpaceNinja
    Mar 16, 2022 at 17:59
  • 1
    @SpaceNinja just a cut and paste issue I guess but yes they really ought to have fixed it by now - I get the upvotes so I have ulterior motives not to report it lol. Jun 14, 2022 at 2:17
32

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.

1
  • Thank you twice. I can't upvote it twice. So i decide write it here )
    – Fakt309
    Mar 4 at 17:34
5

From version 9.1.4 you only need to import ReactiveFormsModule

https://angular.io/guide/reactive-forms

1
  • I did this for version 11 of Angular and it also worked, thanks. May 1, 2021 at 20:38
4

if your are using standalone components the import of ReactiveFormsModule has to be inside the own component instead of app.module.ts.

import { ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css'],
  standalone: true,
  imports: [ ReactiveFormsModule ]
})
export class FormRecipesComponent {

constructor() {}

name = new FormControl('');

}
2

In angular 12 the imports path for matautocompleteModule is changed and it solved my problem.... Now it look like this enter image description here

2

What worked for me was moving my imports to be before my declaration and export, no idea why this worked but it did...

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MatSlideToggleModule,
  ],
  declarations: [SettingsComponent],
  exports: [
    SettingsComponent
  ]
})
export class SettingsModule { }

2

I had just added the FormsModule to the imports of AppModule, but it did not work Had to add the ReactiveFormsModule as well

1

Well what worked for me was to build the form within the template `` in the @component({}), for example--


import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-contact-form',
  template:`
  <form class="validation-form" validate method="createUserWithEmailAndPassword">
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="firstName">First name</label>
      <input type="text" [formControl]="firstName" id="firstName" placeholder="Please enter your first name" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="lastName">Last name</label>
      <input type="text" [formControl]="lastName" id="lastName" placeholder="Please enter your last name" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="email">Email address</label>
        <input type="email" [formControl]="email" id="email" aria-describedby="emailHelp" placeholder="Please enter your last name" required>
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        <div class="valid-feedback">
          Looks good!
        </div>
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="password">Password</label>
      <input type="password" [formControl]="password" id="password" placeholder="Please enter your password" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="zip">Zip</label>
      <input type="text" [formControl]="zip" id="zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>`,

  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.scss']
})
export class ContactFormComponent implements OnInit {

  firstName =  new FormControl('');
  lastName =  new FormControl('');
  email =  new FormControl('');
  password =  new FormControl('');

  constructor() { }

  ngOnInit(): void {
  }

}

This stopped showing errors. If the error persists then this could work out for you

0

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],
0

for me the error was i was doing [FormControl] so instead of capital F use [formControl]

1
  • 1
    this is obviously not the case for OP.
    – Random
    Jul 6 at 13:24

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.