Angular ngSubmit 不起作用(内部按钮和导入模块)

我是一个初学者，第一次对框架进行Angular 测试.

我有一张简单的表格

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

和一个刚刚用ng生成的组件:

import { Component } from '@angular/core';

@Component({
  selector: 'app-homepage',
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.css']
})
export class HomepageComponent {
  constructor(){}
  onSubmit() {
    alert('test');
    console.log('Form submitted successfully!');
  }
}

但是，控制台不会记录任何内容，也不会弹出alert

我还在app.mode.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 } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    HomepageComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }