572

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?

Improve this question
3
  • 17
    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. Commented 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 Commented 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 Commented Jan 15, 2019 at 2:43

11 Answers 11

Reset to default
1146

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 {}
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

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.
@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
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.
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?
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...
|
69

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'.
Improve this answer

2 Comments

Is there a reason the documentation is missing this and we need to hunt through the StackBlitz to see what they omitted??
@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.
35

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.

Improve this answer

1 Comment

Thank you twice. I can't upvote it twice. So i decide write it here )
10

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(''); }
Improve this answer

1 Comment

The documentation of this essential feature is still bad. Can't believe it is already v18.
6

From version 9.1.4 you only need to import ReactiveFormsModule

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

Improve this answer

1 Comment

I did this for version 11 of Angular and it also worked, thanks.
4

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

Improve this answer

Comments

3

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

Improve this answer

Comments

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 { }
Improve this answer

Comments

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

Improve this answer

Comments

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],
Improve this answer

Comments

0

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

Improve this answer

1 Comment

this is obviously not the case for OP.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.