Angular Material提交按钮无响应问题排查求助

DevOps 小满

2026-8-14

问题分析与解决

你的代码存在两个关键问题，导致点击按钮无法触发onSubmit()函数：

1. 提交按钮标签错误

你使用了<a>标签作为提交按钮，但<a>是超链接标签，它的默认行为是页面跳转，即便添加type="submit"属性，也不会触发表单的ngSubmit事件。表单的提交事件只能由<button type="submit">或<input type="submit">这类表单专属控件触发。

修复方式

将<a>标签替换为<button>：

<button mat-raised-button type="submit" class="btncolor">Sign Up!</button>

2. 未导入`FormsModule`

你的表单使用了ngModel指令，但没有在组件所属的模块中导入FormsModule——Angular要求使用ngModel时必须导入该模块，否则表单绑定会失效，也会间接导致提交事件无法正常触发。

修复方式

在模块文件（如app.module.ts）中导入FormsModule，同时确保Material相关依赖模块也已正确导入：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 必须导入此模块
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // Material组件需要动画支持

import { AppComponent } from './app.component';
import { SignupformComponent } from './signupform/signupform.component';
// 导入Material所需的具体模块
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  declarations: [
    AppComponent,
    SignupformComponent
  ],
  imports: [
    BrowserModule,
    FormsModule, // 添加到imports数组中
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }