I am creating a form in Angular which takes in user input. I am using #userForm=”ngForm”

which I believe is a directive which is able to read the input for the form sections.

I am printing out the input through:

 {{ userForm.value | json}} 

however I am not receiving any output.

To use ngForm, I needed to import { FormsModule } from ‘@angular/forms’;

and add FormsModule under imports. When I added these to my component module file (merchant.module.ts), it seemed to have no impact.

Once I added the imports under the app.module.ts, the program finally removed the ngForm error. From my understanding the import needs to be added within the same component, module’s file but it is not able to tell it’s been added.

I’m confused to how this should be set up.I’m wondering if I have set up my merchant component in an incorrect way and if there are any bugs I must fix within the app.module.ts file.

merchant.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MerchantComponent } from './merchant.component';
import { RouterModule, Routes } from '@angular/router';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { FormsModule } from '@angular/forms';

const routes: Routes = [
  {
    path: '',
    component: MerchantComponent
  }
]

@NgModule({
  declarations: [
    MerchantComponent
  ],
  imports: [
    FormsModule,
    CommonModule,
    RouterModule.forChild(routes),
    MatButtonModule,
    MatInputModule
  ]
})
export class MerchantModule { }

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// import { MerchantModule } from './merchant/merchant.module';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { MerchantComponent } from './merchant/merchant.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    MerchantComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    // MerchantModule,

    AngularFireModule.initializeApp({
      apiKey: "AIzaSyDfvjsyNzUyAgxdWkAxdx3eoyxGci0AN5s",
      authDomain: "rewardsx-webapp-admin.firebaseapp.com",
      projectId: "rewardsx-webapp-admin",
      storageBucket: "rewardsx-webapp-admin.appspot.com",
      messagingSenderId: "560293530132",
      appId: "1:560293530132:web:9f7e74b0c38ecc7943b501",
      measurementId: "G-HDRHYL7RS7"
    }),
    AngularFireAuthModule
  ],
  providers: [
    provideClientHydration(),
    provideAnimationsAsync()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

files and folders of project