Angular Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’ angular error Solution

In this article we will see solution for most common angular error: Angular Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’ angular error.

If you are new to Angular and if you are working on any form and using reactive forms then you will be using Angular FormGroup . and while binding FormGroup you might have encountered this error Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’ angular. When you get this error You might think that formGroup is not working in Angular but it’s something related to import module.

When you get this error you need to make sure to check if you are missing any of the following points.

Solution: Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’ angular error

Possible Solution 1

To fix this error, you need to import ReactiveFormsModule from @angular/forms in your module as showing in code below.

i.e app.module.ts


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

}

Possible Solution 2

Make sure if you don’t have spelling error for formGroup.

You can see sample example below to bind formGroup.


<form [formgroup]="myForm">
  Name: <input type="text" formcontrolname="name"><br>
  Age: <input type="number" formcontrolname="age">

  <button>Save</button>
</form>

app.component.ts


import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
	myForm: FormGroup;

	constructor(private fb: FormBuilder) { }

	ngOnInit() {
		this.myForm = this.fb.group({
			name: ['', Validators.required],
			age: ['', Validators.required]
		});
	}
}

Also Read: