Angular中ngForm无法提取用户输入及模块导入问题排查

你的问题核心是组件重复声明导致特性模块配置失效：

• 你既在merchant.module.ts里声明了MerchantComponent，又在app.module.ts里重复声明了这个组件
• Angular规定一个组件只能属于一个模块，此时MerchantComponent会被根模块AppModule接管，merchant.module.ts里导入的FormsModule自然不会生效
• 只有当你在根模块导入FormsModule时，组件才能获取到指令，所以之前只有根模块导入时错误才消失

修复步骤： #

1. 修改app.module.ts
   • 删除declarations数组里的MerchantComponent
   • 取消import { MerchantModule } from './merchant/merchant.module';和imports数组里MerchantModule的注释
   • 可移除根模块里的FormsModule（特性模块已导入，无需重复）

修改后的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';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MerchantModule,
  ],
  providers: [
    provideClientHydration(),
    provideAnimationsAsync()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 确认merchant.module.ts配置
   你当前的merchant.module.ts已经正确导入FormsModule，无需修改，保持现有配置即可。

3. 检查表单模板正确性
   要让{{ userForm.value | json }}有输出，模板必须满足：

   • 表单标签绑定ngForm：<form #userForm="ngForm">
   • 每个输入控件必须添加name属性（Angular依赖name属性追踪表单控件值）
     示例模板：

   <form #userForm="ngForm">
     <input type="text" name="username" ngModel placeholder="用户名">
     <input type="email" name="email" ngModel placeholder="邮箱">
     <button type="submit">提交</button>
   </form>
   <pre>{{ userForm.value | json }}</pre>
   

验证： #

启动项目后，输入内容应该能实时在<pre>标签里看到JSON格式的表单值。

内容的提问来源于stack exchange，提问作者Mohammad Ahmed