Can't bind to 'formgroup' since it isn't a known property of 'form'

Question

Today, we're going to discuss another error that's also very common in Angular: Can't bind to 'formgroup' since it isn't a known property of 'form'. This happens when the user tries to bind the formGroup property to the component variable from the in the .component.html. However, the user might forget importing ReactiveFormsModule in the app.module.ts. In this study blog, we'll see what is "Can't bind to 'formgroup' since it isn't a known property of 'form'", why it occur and how to resolve it. Dont'fret; it's just a few simple steps to fix!

 Table of Contents:

1. What is "Can't bind to 'formgroup' since it isn't a known property of 'form'"
2. Causes
3. Solution
4. The Conclusion
5. The Reference

What is "Can't bind to 'formgroup' since it isn't a known property of 'form'" #

Before understanding the problem, let's understand what's FormGroup. In Angular, FormGroup is used to aggregate a bundle of FormControl which tracks and validate the value and status of each individual form control in a reactive form. Let's look at the example:

import { FormGroup, FormControl, Validators } from '@angular/forms';
  

We first import FormGroup and FormControl that's necessary to build the reactive form. Next, we build a reactive form using the FormGroup and FormControl. See below:

user = new FormGroup
  (
    {
      firstName: new FormControl('', Validators.required),
      lastName: new FormControl('', Validators.required),
      age: new FormControl(''),
    }
  )
  

With this, we've a reactive form, called user and it has three form controls, that're firstName, lastName, and age.

Tip If you want to create multiple forms faster in a more convenient way, do check out FormBuilder for further information. In this tutorial, we'll continue using FormGroup.

Let's continue. In .component.html, we'll create a form using :

    
<input type="text" name="lastName" formControlName="lastName" />
<input type="text" name="age" formControlName="age" />

<span class="alert-header">Note</span>
<span class="alert-body">In reactive form, we use <em>FormControlName</em> to bind the <em>FormControl</em> value with each form control in the <form>. So, Be aware of the consistency between name of the form control.</span>

See the output:

Can't bind to 'formGroup' since it isn't a known property of 'form'.ngtsc(-998002)

  

Why you've configure the reactive form correctly, bind it correctly to a form in .component.html, but still getting error? Don't worry, I'll tell you why.

Causes #

The reason behind the error is because FormGroup and FormControl are the classes provided by ReactiveFormsModule. If you didn't import ReactiveFormsModule in your app.module.ts, our Angular application will not recognize FormGroup and FormControl as parts of our application, and thus throwing the error: Can't bind to 'formgroup' since it isn't a known property of 'form' while we're using them. Let's see the next section for solution.

Solution #

There's a very simple and quick solutions for this error.

1. Open your app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';



@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }
  

2. import ReactiveFormsModule in your app.module.ts.

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

3. Place ReactiveFormsModule in the imports:[ ] under @NgModule directive.

imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
  ]
  

In this case, we're able to use the providers and classes in the ReactiveFormsModule. Now, go back your .component.html and you'll find that the error has gone! Great, you've resolved this problem! Easy, right?

Note If you have another sub-module, and you use the reactive form within the components of that sub-module, Please follow this solution in your sub-module.

The Conclusion #

Today, we've learned about another common error in Angular: Can't bind to 'formgroup' since it isn't a known property of 'form', why it happens and how to resolve it correctly. When we're using Angular framework, we should understand the providers, classes and directives which are available in different built-in modules. This may help us to debug and find out some error like this in a more efficient way. Hope you guys enjoy and thank you!

The Reference #

For further information, please visit:

1. Angular Reactive Form: https://angular.io/guide/reactive-forms#reactive-forms
2. FormBuilder: https://angular.io/api/forms/FormBuilder
3. Angular Reactive Form APIs: https://angular.io/guide/reactive-forms#reactive-forms-api