Angular: Can't bind to 'formControl' since it isn't a known property of 'input'
Dung Do Tien
Jun 18 2021
281
Hello! I have a form in Angular 9. I have some input in that form, they see as below:
<div class="row"> <div class="col-6"> <input type="text" placeholder="Your name" [formControl]="yourName" /> </div> <!--AND some other control here --> </div>
And this is my component ts file:
import {Component, OnInit} from "@angular/core";
import {ActivatedRoute, Router} from "@angular/router";
import {FormControl} from "@angular/forms";
@Component({
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
yourName: FormControl;
constructor() {
this.yourName = new FormControl();
}
ngOnInit(): void {
}
}
When run code I get an error: Can't bind to 'formControl' since it isn't a known property of 'input'.
compiler.js:1021 Uncaught Error: Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'. ("text">
How can I resolve it?
Have 2 answer(s) found.
-
M1
Mobile Legend Jun 18 2021
When you use
formControlyou have to importReactiveFormsModulein your component.Open
AppModule.tsfile and add more as below:import {FormsModule, ReactiveFormsModule} from '@angular/forms'; @NgModule({ imports: [ BrowserModule, FormsModule, ReactiveFormsModule, MaterialModule, ], ... }) export class AppModule {}I hope it works for you!
-
C0
Christian Moreno Jun 18 2021
I think the reason for this issue can happen:
The component you are using
formControlin is not declared in a module that imports theReactiveFormsModule.So check the module that declares the component that throws this error.
* Type maximum 2000 characters.
* All comments have to wait approved before display.
* Please polite comment and respect questions and answers of others.