Angular 16 - can't bind to 'formGroup' since it isn't a known property of 'form'

Issue

I am already having a running Angular application, as there is functionality extending I have to implement the routing and login page for the application. Previously routing is not there, as part of routing I have added the following code.

app.modules.ts

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


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { SignUpComponent } from './sign-up/sign-up.component';
import { LoginComponent } from './login/login.component';
import {CommonModule} from "@angular/common";
import {FormsModule , ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    SignUpComponent,
    LoginComponent,

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CommonModule,
    ReactiveFormsModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

sign-up.componnent.ts

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';

@Component({
  selector: 'app-sign-up',
  templateUrl: './sign-up.component.html',
  styleUrls: ['./sign-up.component.css']
})


export class SignUpComponent implements  OnInit{

  public signupFrom : FormGroup|any;
  constructor(private formBuilder: FormBuilder) {}


  items : Array<any> = [
    {name:"username", type:"text", data:"Username"},
    {name:"password", type:"password",data:"Password"},
    {name:"email", type:"text",data:"Email"}

  ]



  ngOnInit(): void {
    this.signupFrom = new FormGroup({

      'Username' : new FormControl(),
      'Passoword' : new FormControl(),
      'Email' : new FormControl()
    })
  }
}

sign-up.component.htm

<div class="row">
  <div class="mx-auto col-10 col-md-8 col-lg-6">
    <!-- Form -->
    <form [formGroup]="signupFrom" class="form-example"  >
      <div *ngFor="let item of items " class="form-group"  >
        <label for="{{item.name}}">{{item.data}}</label>
        <input

          type="{{item.type}}"
          class="form-control {{item.name}}"
          id="{{item.name}}"
          placeholder="{{item.data}}..."
          name="{{item.data}}"
        />
      </div>



      <button type="submit" class="btn btn-primary btn-customized mt-4">
        Sign Up
      </button>
    </form>
    <!-- Form end -->
  </div>
</div>

When I tried to execute with ng-serve I am getting the following error: Can't bind to 'formGroup' since it isn't a known property of 'form'.

Solution

I see that the code is correct except some points:

1. The modules never should be imported in the components.

2. Declare your formGroup as: public signupFrom! : FormGroup (the ! say to typeScript "I know that at first the form can be null or undefined").

3. Generally, when we import a new module in our app.module.ts we need "restart" the ng serve

4. You should use binding and formControlName in your .html, else the inputs are not "connected" with the formControls of the formGroup.

5. See the *ngIf to avoid initial errors

   <!--the *ngIf avoid initial errors-->
   <form *ngIf="signupForm" [formGroup]="signupFrom" class="form-example"  >
     <div *ngFor="let item of items " class="form-group"  >
       <label for="{{item.name}}">{{item.data}}</label>
       <!--"better" use binding [ ] instead of interpolation {{ }}-->
       <input
   
         [type]="item.type"
         [class]="'form-control '+item.name"
         [id]="item.name"
         [placeholder]="item.data+'...'"
         [formControlName]="item.name"
       />
     </div>
     <button type="submit" class="btn btn-primary btn-customized mt-4">
       Sign Up
     </button>
   </form>
   

6. NOTE: Be careful, you're wrote when you create the formGroup

   'Passoword' : new FormControl(), //<--should be Password (without the "o")?
   

Answered By - Eliseo