Can't bind to 'formGroup' since it isn't a known property of 'form' Angular 8 Error

Updated on: December 04, 2019

Error: Uncaught Error: Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'.

If you are running a project developed in Angular 8 to show Angular Reactive Forms on Web Page and getting this 'formGroup' error, then you can try following solution, it should fix your above issue.

Solution:

Open your app.module.ts file and add the following import statement

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

Now, add FormsModule & ReactiveFormsModule these two imports in @NgModule=>imports section as shown below:

  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule
  ]

Once you add above import statement and import Module in @NgModule, then your issue of formGroup will get fixed. You can later use FormGroup, FormControl, Validators at the Angular Component level by declaring the import statement as shown below: 

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
  selector: 'app-add-shop',
  templateUrl: './add-shop.component.html',
  styleUrls: ['./add-shop.component.css']
})
export class AddShopComponent implements OnInit {
  addShopFormGroup = new FormGroup({
    shopName: new FormControl('', [Validators.required, Validators.minLength(5), Validators.maxLength(20)]),
    shopAddress: new FormControl('', [Validators.required, Validators.maxLength(200)]),
  });
  constructor() { }
  ngOnInit() {
  }
  onSubmit() {
    console.warn(this.addShopFormGroup.value);
  }
}

add-shop.component.html

<h3>Add New Shop</h3>
<hr>
<div class="container" style="background-color:#f0f0f0;">
    <div class="row main" style="max-width:350px; padding: 20px 0px;margin:auto;opacity:1;">
        <form [formGroup]="addShopFormGroup" (ngSubmit)="onSubmit()">
            <label>
              Shop Name:
              <input type="text" formControlName="shopName">
            </label>
            <label>
              Shop Address:
              <input type="text" formControlName="shopAddress">
            </label>
            <button type="submit" [disabled]="!addShopFormGroup.valid">Submit</button>
          </form>
</div>
</div>

Related Articles