Angular typescript Can't bind to 'formGroup' since it isn't a known property of 'form' in Angular

Issue

I want to extract data from a form using formcontrol everything other than the html does not have an error if i delete the [formcontrol] = "userForm" from html the projects runs perfectly Image reference 1, Image reference 2, Image reference 3, Image reference 4

I followed multiple tutorials but nothing seems to work. I was told its because of the login-form being standalone tried to delete that line and work arounded but it caused too many errors. i also tried to change the node version i'm using node 18 and angular 17.I'm quite new to angular and i have this project due in couple of days so please if anyone can help i'd really appreciate it.I have the reactiveForm imported too in app module

import { Validators,FormGroup, FormControl} from '@angular/forms';
@Component({
selector: 'login-form',
standalone:true,
templateUrl: './login-form.component.html',
styleUrls: ['./login-form.component.css'] 
})
export class LoginFormComponent {

userForm = new FormGroup ({
  'email': new FormControl(''),
  'password': new FormControl(''),
})

constructor() {}

onSubmit(): void {
}
}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';  // Correct import
import { LoginFormComponent } from './loginForm/login-form.component';
@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    LoginFormComponent
    
  ],

})
export class AppModule { }

import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { DestinationComponent } from './destination/destination.component';
import { LoginFormComponent } from './loginForm/login-form.component';
import { ReactiveFormsModule } from '@angular/forms';  // Correct import
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule,
    LoginFormComponent,
    ReactiveFormsModule
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'app';
}

Solution

you just have to import ReactiveFormsModule in you standalone component Reactive Forms

Answered By - doomed4life