Solved – can’t bind to ‘formgroup’ since it isn’t a known property of ‘form’

In this article, you will learn how to solve can’t bind to ‘formgroup’ since it isn’t a known property of ‘form’ error in Angular.

Let’s look at a code example that produces the same error.

app.component.html

<form [formGroup]="myForm">
  Naam: <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]
		});
	}
}

Output on when running the application

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

In order to solve can’t bind to ‘formgroup’ since it isn’t a known property of ‘form’ error you need to import ReactiveFormsModule in each submodule file.

app.module.ts

 import { FormsModule, ReactiveFormsModule } from '@angular/forms';`

@NgModule({
  declarations: [
    AppComponent,
  ]
  imports: [
    FormsModule,
    ReactiveFormsModule,
    yourSubModule,
],
...

You need to import ReactiveFormsModule in your yourSubModule like below:

...
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

...

@NgModule({
  imports: [
    ...,
    FormsModule,    //import here
    ReactiveFormsModule //import here
  ],
  declarations: [...],
  providers: [...]
})

export class yourSubModule {}