formGroup error

[fluid perch]

Hey guys so im trying to learn angular, and i am trying to build a simple crud project. I am trying to build a form to add user data but i keep getting the following error in one of my html files
(directive) FormGroupDirective
Can't bind to 'formGroup' since it isn't a known property of 'form'.ngtsc(-998002)
user-add-edit.component.ts(4, 21): Error occurs in the template of component UserAddEditComponent.

The required module ReactiveFormsModule is already imported in the app module file alongside other imports requried.
Also everything in my components script seems to be ok.

Anyone have any ideas on what the issue might be

<form [formGroup]="userForm" (ngSubmit)="onFormSubmit">

The component:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
selector: 'app-user-add-edit',
templateUrl: './user-add-edit.component.html',
styleUrls: ['./user-add-edit.component.css']
})
export class UserAddEditComponent {

userForm : FormGroup;

constructor( private _fb:FormBuilder){
this.userForm = this._fb.group({
firstName: '',
lastName: '',
phone: '',
email: '',
});
}
onFormSubmit(){
if(this.userForm.valid){
console.log(this.userForm.value);
}
}

}
`

[heavy eagle]

In what module did you declare UserAddEditComponent?

Ensure to import the (reactive) forms module in the same module, and not AppModule.

[fluid perch]

So the form group is coming from the user-add-edit component for which i have provided the code above

If i import the reactiveforms module i get this

'ReactiveFormsModule' is declared but its value is never read.ts(6133)

[heavy eagle]

But what module is the component declared in ?

Also in AppModule?

[fluid perch]

The component is declared in the app.components file while the reactive forms is declared in the app modules file.

`import { Component } from '@angular/core';
import { UserAddEditComponent } from './user-add-edit/user-add-edit.component';
import {MatDialog} from '@angular/material/dialog';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'userManagement';

constructor(private _dialog: MatDialog){}

openUserEditForm(){
  this._dialog.open(UserAddEditComponent)
}

}
`

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatButtonModule, MatIconButton} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
import { UserAddEditComponent } from './user-add-edit/user-add-edit.component';
import {MatDialogModule} from '@angular/material/dialog';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import {MatSelectModule} from '@angular/material/select';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
declarations: [
AppComponent,
UserAddEditComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatToolbarModule,
MatButtonModule,
MatIconModule,
MatDialogModule,
MatFormFieldModule,
MatSelectModule,
MatInputModule,
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`

[heavy eagle]

WHat version of angular ?

[fluid perch]

16 i think or whichever is the latest one

let me check

[heavy eagle]

When are u getting the error ?

[fluid perch]

Angular CLI: 16.2.6

[heavy eagle]

When u run ng build ?

[fluid perch]

Whenever i try to submit the form. No data is shown on the console log

It's just an error that vs code shows

[heavy eagle]

So everything works as expected ?

[fluid perch]

I fill out the form and on the console instead of getting backl the inputed data i get nothing

[heavy eagle]

Is the form valid ?

U do need to do onFormSubmit() tho.

U forgot the ()

[fluid perch]

You are right but it still does not log any data entered despite the function requesting the values

`export class UserAddEditComponent {
userForm: FormGroup;

constructor(private _fb: FormBuilder) {
this.userForm = this._fb.group({
firstName: '',
lastName: '',
phone: '',
email: '',
});
}

onFormSubmit() {
if (this.userForm.valid) {
console.log(this.userForm.value);
}
}
}`

I'll try restarting the server

[heavy eagle]

onFormSubmit() {
    console.log('test')
    if (this.userForm.valid) {
      console.log(this.userForm.value);
    }
  }

Is that logged?

[fluid perch]

I think it worked. Thanks man geniunely appreciated