Wednesday, 19 December 2018

Problem: Can't bind to 'formGroup' since it isn't a known property of 'form'.

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


Most comman problem in angular is : 'Can't bind to 'formGroup' since it isn't a known property of 'form'.'

this is because formGroup and formControl directive are provided by angular reactiveform

and probably you did not include this is your's angular app. so first you include this in your's angular app so that this error is gone

so include the reactive form directive in your's app.component.module by following way

import { ReactiveFormsModule } from "@angular/forms";

and also include this in imports array so your's
app.module.ts would we look like this


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from "@angular/forms";

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CreateEmployeeComponent } from './employee/create-employee.component';
import { ListEmployeesComponent } from './employee/list-employees.component';

@NgModule({
declarations: [
AppComponent,
CreateEmployeeComponent,
ListEmployeesComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


and also include the FormGroup and FormControl in your's component.ts
in my case it is create-employee.component.ts
have a look
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from "@angular/forms";
@Component({
selector: 'app-create-employee',
templateUrl: './create-employee.component.html',
styleUrls: ['./create-employee.component.css']
})
export class CreateEmployeeComponent implements OnInit {
employeeForm: FormGroup;
constructor() { }

ngOnInit() {
this.employeeForm = new FormGroup({
fullName: new FormControl(),
email: new FormControl()
})
}
onSubmit(): void {
console.log(this.employeeForm.value);
}

}

Now i can hope that your's error should be gone. enjoy......

No comments:

Post a Comment

AdSense

The Ultimate Guide to Interceptors: Understanding Their Power and Functionality

  The Ultimate Guide to Interceptors: Understanding Their Power and Functionality An interceptor is a service that can intercept HTTP reques...

Follow