Can't use formGroup in my angular project

Question

I try to use formGroup in my angular project, but it returns an error :

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

I have imported FormsModule and ReactiveFormsModule into my auth.module and app.module but I can't seem to solve my error. I hope someone will be kind enough to help me, please.

HTML

<form [formGroup]="form" (submit)="submit()">
    <div class="input-field">
        <input id="username" formControlName="username" type="text" required>
        <label for="username">Username</label>
    </div>
    <div class="input-field">
        <input id="email" formControlName="email" type="text" required>
        <label for="email">Email</label>
    </div>
    <div class="input-field">
        <input id="password" formControlName="password" type="password" required>
        <label for="password">Mot de passe</label>
    </div>
    <div class="button-form">
        <button class="custom-btn btn-sign-in" type="submit">S'inscire</button>
    </div>
</form>

auth.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [
    LoginComponent,
    RegisterComponent
  ],
  imports: [
    CommonModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule
  ],
})
export class AuthModule { }

app.module

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

import { AppRoutingModule, routingComponents } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
import { MainComponent } from './pages/main/main.component';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    routingComponents,
    MainComponent
  ],
  imports: [
    CommonModule,
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

register.component

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators} from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {

  form: FormGroup;

  constructor(
    private router: Router,
    private formBuilder: FormBuilder
  ) { }

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      username: '',
      email: '',
      password: ''
    });
  }

  submit(): void{
    console.log(this.form.getRawValue());
  }

  btnClick() {
    this.router.navigate(['/login']);
  }
}

Looks fine to me. Try restarting the server. May sound silly but have helped me in lots of situations. — Aakash Goplani, Feb 09 '22 at 19:30
@AakashGoplani I already tried to restart the server but it did not change anything, my error is still present ;( — Jean Goua, Feb 09 '22 at 19:37
Can you please share the whole error description including the path? — yurzui, Feb 09 '22 at 19:40
I am sure one of the solution will work for you https://stackoverflow.com/q/39152071/3411606 — Aakash Goplani, Feb 09 '22 at 19:42
Out of curiosity if you cast `form: FormGroup` as just a var `form;` do you still get the same result? A way to reproduce the instance would be nice too with a stackblitz or something. — Chris W., Feb 09 '22 at 19:44
@yurzui Error: src/app/pages/auth/register/register.component.html:5:10 - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'. 5
~~~~~~~~~~~~~~~~~~ src/app/pages/auth/register/register.component.ts:7:16 7 templateUrl: './register.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component RegisterComponent. — Jean Goua, Feb 09 '22 at 19:51
@AakashGoplani I have already spent a lot of time on this page but without result... — Jean Goua, Feb 09 '22 at 19:53
Where is this AuthModule loaded from. I don't see any entry in AppModule! — Aakash Goplani, Feb 09 '22 at 19:56
@AakashGoplani Good point! but now is it normal that I have this error? Appears in the NgModule.imports of AppModule, but itself has errors export class AuthModule { } The Component 'LoginComponent' is declared by more than one NgModule. export class LoginComponent implements OnInit { 'LoginComponent' is listed in the declarations of the NgModule 'AuthModule'. and 'appModule' — Jean Goua, Feb 09 '22 at 20:28
This is the concept in Angular - you can declare a component only once. So Login Component should only be declared once by any module. Seems like it is declared twice - once by AuthModule and then by AppModule. But the code snippets you have shared I don't see that entry in AppModule, this is strange! — Aakash Goplani, Feb 09 '22 at 21:02
@AakashGoplani Thank you very much you have solved my problem! — Jean Goua, Feb 09 '22 at 21:53

score 1 · Answer 1 · answered Feb 09 '22 at 21:41

This might be an import issue: If you're using the RegisterComponent in another module, be sure to add the RegisterComponent to the exports of the AuthModule as well

Also noteworthy is that importing the FormsModule and ReactiveFormsModule into the AppModule makes it available throughout your app

Can't use formGroup in my angular project

1 Answers1