How to fix "cannot bind to 'formgroup' since it is not a known property of 'form'?

298 Asked by ConnorPeake in Salesforce , Asked on Jun 19, 2024

I am currently engaged in a particular task that is related to working on an angular-based project that includes a form of user registration. For this, I have decided to use the reactive forms to handle form validation and data handling. However, when I am trying to run my angular application and navigate to the registration form, I am receiving an issue message which is stating that it “ cannot bind to ‘formgroup’ since it is not a known property of ‘form’”. How can I troubleshoot and resolve this particular issue? Here is the snippet of my code from my “registration.component.html:

<form [formGroup]=”registrationForm” (ngSubmit)=”onSubmit()”>
  
    Username:
    <input id=”username” formControlName=”username”>
  

  <button type=”submit”>Register</button>
</form>

And in my “refistration.component.ts”:
Import { Component, OnInit } from ‘@angular/core’;
Import { FormBuilder, FormGroup, Validators } from ‘@angular/forms’;
@Component({
  Selector: ‘app-registration’,
  templateUrl: ‘./registration.component.html’,
  styleUrls: [‘./registration.component.css’]
})
Export class RegistrationComponent implements OnInit {
  registrationForm: FormGroup;
  constructor(private fb: FormBuilder) {}
  ngOnInit(): void {
    this.registrationForm = this.fb.group({
      userDetails: this.fb.group({
        username: [‘’, Validators.required]
      })
    });
  }
  onSubmit(): void {
    console.log(this.registrationForm.value);
  }
}

Answered by Crowny Hasegawa

The particular error if “Cannot bind to formgroup since it is not known property of form” generally occurs when the angular doesn’t or fails to recognize the “formGroup” directive. This is often due to several reasons such as Missing reactive forms module or even incorrect module import. Here are the approaches given to troubleshoot and resolve the issue:-

Import the reactive forms module

Firstly, you should ensure that you have imported the “Reactive forms module” in the module where your particular Component is declared. For example in the “app.module.ts”:

Import { NgModule } from ‘@angular/core’;

Import { BrowserModule } from ‘@angular/platform-browser’;

Import { ReactiveFormsModule } from ‘@angular/forms’;

Import { AppComponent } from ‘./app.component’;

Import { RegistrationComponent } from ‘./registration/registration.component’;

@NgModule({

  Declarations: [

    AppComponent,

    RegistrationComponent

  ],

  Imports: [

    BrowserModule,

    ReactiveFormsModule

  ],

  Providers: [],

  Bootstrap: [AppComponent]

})

Export class AppModule { }

Verifying module declaration

Now you should try to ensure that the “RegistrationComponent” is declared in the same module where “ReactiveFormsModule” is imported.

Once you have confirmed that the “Reactive form module” is imported and your Component is properly declared in the module, the error will be solved automatically and your particular function will begin to run correctly.

Your Answer

Answers (2)

vinay

Still having problem when “RegistrationComponent” is declared in the same module that “ReactiveFormsModule” is imported slope run. I still want to know how to fix it.

1 Month

kalylcie

Make sure that RegistrationComponent is declared in the same module where ReactiveFormsModule Geometry Dash is imported. If you have a feature module for your registration component, ensure that ReactiveFormsModule is imported in that module as well.

1 Month