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

Dung Do Tien Jun 18 2021 1058

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" />
  <!--AND some other control here -->

And this is my component ts file:

import {Component, OnInit} from "@angular/core";
import {ActivatedRoute, Router} from "@angular/router";
import {FormControl} from "@angular/forms";

    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.
  • C

    Christian Moreno Jun 18 2021

    I think the reason for this issue 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.

  • M

    Mobile Legend Jun 18 2021

    When you use formControl you have to import ReactiveFormsModule in your component.

    Open AppModule.ts file and add more as below:

    import {FormsModule, ReactiveFormsModule} from '@angular/forms';
      imports: [
    export class AppModule {}

    I hope it works for you!

Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Popular Tips

X Close