Can’t bind to ‘formgroup’ since it isn’t a known property of ‘form’ :  Whenever start with Angular App, everyone needs to start with form kind of information, So In most of the cases we start collect user information using form in Angular. Creating form and giving it name is the process of Angular, We declare the form name and use it in the HTML form. While executing the application It start throwing an error.  Let’s checkout this with code example.

app.component.html

<form [formGroup]="myForm">
  Naam: <input type="text" formControlName="name"><br>
  Age: <input type="number" formControlName="age">

  <button>Submit</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]
        });
    }
}

Error after running app

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,
    yourModule,
],
...

You will have to import ReactiveFormsModule in your yourModule like this:

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

...

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

export class yourModule {}

 

Like us on facebook

Please follow and like us:

Tagged in:

, ,