Can't bind to 'formGroup' since it isn't a known property of 'form' Angular 8 Error
Updated on: May 27, 2021
If you are running a project developed in Angular 8 to show Angular Reactive Forms on Web Page and getting error as:Uncaught Error: Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form', 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>