CODEWITHSUNDEEP
javascripthtmlangulartypescript
Jean Goua
Jean Goua

Reputation: 9

Can't use formGroup in my angular project

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']);
  }
}

Upvotes: 0

Views: 157

Answers (1)

laudebugs
laudebugs

Reputation: 176

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

Upvotes: 1

Related Questions