Can't use formGroup in my angular project-CodePudding

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 >
        <input id="username" formControlName="username" type="text" required>
        <label for="username">Username</label>
    </div>
    <div >
        <input id="email" formControlName="email" type="text" required>
        <label for="email">Email</label>
    </div>
    <div >
        <input id="password" formControlName="password" type="password" required>
        <label for="password">Mot de passe</label>
    </div>
    <div >
        <button  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']);
  }
}

CodePudding user response：

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