[Angular2+] How to fix can’t bind to ‘formgroup’ since it isn’t a known property of ‘form’

While working with FormGroup Angular API, you will write code like this

//add-product.component.ts
<form [formGroup]="newProductForm" (submit)="createNewProduct()">
   <div class="form-group">
      <label for="name">Name</label>
      <input type="text" name="name" required>
   </div>
   <button type="submit" class="btn btn-default">Submit</button>
</form>

But Sadly, once you compile you will get an error like this can’t bind to ‘formgroup’ since it isn’t a known property of ‘form’.

How to fix can’t bind to ‘formgroup’ since it isn’t a known property of ‘form’

Let’s understand the error first. When adding the formGroup property to the HTML form tag, the compiler tells us that the form does not have a property called formGroup, and it’s normal.

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

Since the formGroup property is a part of the Forms Module , we must import FormsModule and ReactiveFormsModule in app.module.ts

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

, and then in the imports array in the same file ( app.module.ts), we add the imported module into the imports Array.

//app.module.ts
imports: [
  FormsModule,
  ReactiveFormsModule
],

That’s all. Your Project will be compiled again.

One thing to take care of is that this solution is working with components declared under the app module directly.

Conclusion

So, to fix can’t bind to ‘formgroup’ since it isn’t a known property of ‘form’, you should add FormModule and ReactiveFormsModule to your app.module.ts if your component is directly under app.module or to add them in a specific Module file with the same way.

Follow our other Articles and if you are searching for Angular useful content go Here and give us your feedback.