Angular中ngSubmit失效问题排查（已导入模块且按钮在表单内）

核心问题：表单类型与模块导入不匹配，或响应式表单未正确绑定控件 #

你当前的代码存在两种典型的不匹配情况，对应两种解决路径：

路径1：使用模板驱动表单（保持现有HTML写法）

你现在的HTML是模板驱动表单的写法，但AppModule中只导入了响应式表单所需的ReactiveFormsModule，模板驱动表单需要额外导入FormsModule：

修改app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomepageComponent } from './homepage/homepage.component';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    HomepageComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormsModule // 添加这一行
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

路径2：使用响应式表单（匹配已导入的ReactiveFormsModule）

如果想沿用响应式表单模块，需要给表单绑定FormGroup并关联控件：

1. 修改组件代码，定义表单组：

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-homepage',
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.css']
})
export class HomepageComponent {
  // 定义表单组与控件
  testForm = new FormGroup({
    test: new FormControl('')
  });

  constructor(){}
  onSubmit() {
    alert('test');
    console.log('Form submitted successfully!');
    console.log('表单值：', this.testForm.value);
  }
}

2. 修改HTML模板，绑定表单组与控件：

<form [formGroup]="testForm" (ngSubmit)="onSubmit()">
   <label for="test">Test Prompt: </label>
   <input type="text" id="test" name="test" formControlName="test">
   <button type="submit">Search</button>
</form>

额外检查点 #

确认HomepageComponent已在AppComponent的模板中正确引用（例如添加<app-homepage></app-homepage>），否则组件不会渲染，事件自然无法触发。

内容的提问来源于stack exchange，提问作者Sombre Dreamer